如何详细阐述Vue项目中Axios封装API接口的步骤与技巧？

本文共计751个文字，预计阅读时间需要4分钟。

一、axios的封装及在vue项目中的应用

在vue项目中，我们经常需要与后台进行数据交互，获取或发送数据。常用的工具是axios库，它是一个基于Promise的HTTP客户端，可以在浏览器端和node.js中使用。

axios库具有许多优点，例如：

- 拦截请求和响应- 转换请求和响应数据- 取消请求- 自动转换JSON数据- 请求和响应超时

下面是一个简单的axios封装示例：

javascriptimport axios from 'axios';

const service=axios.create({ baseURL: 'https://api.example.com', // 设置基础URL timeout: 5000 // 设置请求超时时间});

// 请求拦截器service.interceptors.request.use( config=> { // 在这里可以添加token等认证信息 return config; }, error=> { // 处理请求错误 return Promise.reject(error); });

// 响应拦截器service.interceptors.response.use( response=> { // 在这里可以处理响应数据 return response.data; }, error=> { // 处理响应错误 return Promise.reject(error); });

export default service;

通过这种方式封装axios，我们可以在vue组件中方便地使用axios进行数据交互。

一、axios的封装

在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的120.53.31.103:84/' } //在生产环境中的测试 production if(process.env.NODE_ENV == 'production') { axios.defaults.baseURL = 'wap.365msmk.com/' } //还有一种环境 debug

设置响应超时时间

通过axios.defaults.timeout设置默认的请求超时时间。如果超出了响应时间，就会告知用户当前请求超时，请刷新等等

//响应超时的时间 axios.defaults.timeout = 5000;

设置接口请求拦截

//接口请求拦截 axios.interceptors.request.use( config => { config.headers = { DeviceType : 'H5' } //设置响应头部 return config } )

使用promise返回axios请求的结果

post :

export function get(url,params){ return new Promise((resolve,reject) => { axios.get(url,{ params : params }).then(res => { resolve(res) }).catch(err => { reject(err) }) }) }

get :

export function post(url,params){ return new Promise((resolve,reject) => { axios.post(url,params) .then(res => { resolve(res.data) }) .catch(err => { reject(err.data) }) }) }

这个时候，http.js里面的就写好了。下面就要去api.js去获取api接口了。

现在是api.js中的内容

首先是要在api.js中引入刚刚封装好的axios

import {get,post} from '../http/http.js' //get post 同时都要引入

然后就可以根据接口文档来进行数据的获取啦

//封装接口的方法 export function getAppIndex() { return get('api/app/recommend/appIndex') } export function getBanner() { return get('api/app/banner') } export function getTel() { return post('api/app/smsCode',{ //这里用的是params传参，直接写{}就可，不用再声明params啦 mobile : 18567391972, sms_type : 'login' }) }

再再然后，就可以去vue页面通过生命周期来获取数据啦。

再再再注意，这里不一定一定要使用async函数，这只是其中一种方法啦

async mounted() { // 明星讲师、精品课程等等 let res = await getAppIndex(); //添加到数组 this.startList = res.data.data.list // 轮播图列表 var banner = await getBanner(); // console.log('轮播图'+ banner) if (banner.data.code == 200) { this.bannerList = banner.data.data } // 手机验证码接口 let Tel = await getTel(); // console.log('手机验证码'+ Tel) // },

到此这篇关于详解Vue中Axios封装API接口的思路及方法的文章就介绍到这了,更多相关Vue Axios封装API接口内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！