Vue中axios的封装
axios的封装
安装
npm install axios; //命令行安装axios
引入
首先，新建一个js文件用于引入axios。比如说，新建一个http.js文件，在文件中引入步骤如下所示：
import QS from 'qs';//引入qs模块，为post型数据提供序列化（非常重要）
import { Toast } from 'vant';
# 设置请求超时
axios.defaults.timeout = 10000: //设置超时时间为10s```
# 设置post请求方式请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
设置请求拦截
首先，导入vuex。因为下面需要使用到里面的状态对象，用于实现登录认证功能。
代码如下：
config => {
const token = store.state.token;
token && (config.headers.Authorization = token);
return config;
},
error => {
return Promise.error(error);
})
注：在每次发送请求之前判断store中是否存在token，如果存在的话就将其添加到http请求的请求头当中去，用于后台通过token判断用户登录情况。同时，还存在一种情况是，token可能是过期的。所以在响应拦截器中要对返回状态进行判断。（响应拦截下面会讲到）
响应拦截
axios.interceptors.response.use(
response => {
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
error => {
if (error.response.status) {
switch (error.response.status) {
//请求返回的错误妈需要与后台开发人员协商好，以便更快的定位错误。
case 401: //用户未登录
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
break;
case 403: //token过期
Toast({
message: '登录已过期，请重新登录',
duration: 1000,
forbidClick: true
});
localStorage.removeItem('token');
store.commit('loginSuccess', null);
setTimeout(() => {
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
}, 1000);
break;
case 404: //请求错误
Toast({
message: '该请求不存在',
duration: 1500,
forbidClick: true
});
break;
default: // 其它错误，直接抛出错误提示
Toast({
message: error.response.data.message,
duration: 1500,
forbidClick: true
});
}
return Promise.reject(error.response);
}
}
});
接下来是，封装get()和post()方法
//axios对应的请求方式有很多，这里主要讲解get与post。
首先是get方法的封装，封装方式如下：
export function get(url, params){
return new Promise((resolve, reject) =>{
axios.get(url, {
params: params
}).then(res => {
resolve(res.data);
}).catch(err =>{
reject(err.data)
})
});
通过上面的代码，我们可以看到，get函数有两个参数。第一个参数代表的是我们要请求的url地址，第二个参数代表的是请求该url时携带的请求参数。接下来是get请求返回的promise对象，成功时返回resolve，失败时返回reject。
export function post(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, QS.stringify(params))
.then(res => {
resolve(res.data);
})
.catch(err =>{
reject(err.data)
})
});
}
post方法的封装与上面的get类似，不同之处在于，post在提交参数的书写方式。post所携带的第二个参数是一个参数对象（在这里用到了QS模块！！！），而get的第二个参数是一个{ }。
以上呢，就是axios的基本封装了！
那么，当我们封装好axios以后要如何去使用呢？接下来我们就一起去了解一下api接口的实现》》》》
实现创建一个js接口文件，统一管理接口。
然后在该文件中引入get()和post()
//api.js
import {get, post} from './http.js';
export const login = p => post('http://www.xxxx.com/api/', p)
在这里我们定义了一个login方法，这个方法有一个参数p，它是请求该接口时携带的参数对象。另一个url就是我们请求接口的地址。
这样，我们就写好了一个api接口了，接下来就是在页面方法中引用。
//login.vue
import {login} from '@/request/api';
export default {
name: 'login',
methods: {
onLogin() {
login({
userName: 123,
passWord: xxxx,
}).then(res = > {
console.log(res)
})
}
}
}
以上就是最基本的axios封装啦～～～～～
本文地址：https://blog.csdn.net/qq_43542239/article/details/108674041