背景：一个vue项目中需要使用axios进行数据接口请求，所以，本文简单讲了一下本人在一个项目中使用axios的过程，包括安装axios、封装axios以及axios的封装后的具体使用
一、axios安装：首先安装axios
npm install axios
二、axios封装：项目中创建一个js文件如：axios.js,在axios.js文件中进行axios的封装
//1、引入axios
import axios from 'axios'
//2、创建axios的实例
let httpService = axios.create({
baseUrl: process.env.NODE_ENV === "development" ? "/devApi" : "/proApi",// TODO:具体的配置可以根据项目情况而来
timeout:5000
})
//3、axios的拦截--request
httpService.interceptors.request.use(config => {
// 请求成功处理
if(localStorage.getItem('token')){
//判断浏览器中的cookie中是否存在项目的token
config.headers.token = localStorage.getItem('token')
}
return config;
},err => {
Promise.reject(err);// 请求错误处理
})
//4、axios的拦截--response
httpService.interceptors.response.use(response => {
// TODO:具体的code对应的处理可继续添加修改
if(response.data.code === 200){
console.log('请求成功')
}
if(response.data.code === 300){
console.log(response.data.msg)
}
return response;
},err => {
// TODO:具体的code对应的处理可继续添加修改
if(err.response.code === 301){
console.log('登录过期');
//登录过期跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面 ---主页(index) 或者 退出到登录前的浏览的页面
//这样登录页面登录接口成功之后可以进行跳转 主页(index) 或者 退出到登录前的页面： let path = this.$route.query.redirect || '/index.js'; this.$router.push(path);
setTimeout(() => {
this.$router.replace({
path: '/login',
query: {
redirect: this.$router.currentRoute.fullPath
}
});
}, 1000);
localStorage.setItem('token','');//清除token
}
if(err.response.code === 500){
console.log('请联系管理员');
}
return Promise.reject(err);
})
//5、get请求的封装
export function get(url,params={
}){
return new Promise((resolve,reject) => {
httpService({
url:url,
method:'get',
params:params
}).then(res => {
resolve(res);
}).catch(err => {
reject(err);
})
})
}
//6、post请求封装 默认json格式:'Content-Type':'application/json',如果是文件上传，可以修改headers为 headers: {
'Content-Type': 'multipart/form-data' }
export function post(url,params={
},headers={
'Content-Type':'application/json'}){
return new Promise((resolve,reject) => {
httpService({
url:url,
method:'post',
data:params,
headers: headers
}).then(res => {
resolve(res);
}).catch(err => {
reject(err);
})
})
}
//7、将模块暴露
export default{
get,
post
}
三、axios封装库的使用：在api的文件中引入封装好的axios,如在用户api的文件（user.js）中
import {
get,post} from '../axios.js';
//获取用户list
export const getUserList = params => get('/userList',params);
//提交用户信息
export const updateUserInfo = params => post('/updateUserInfo',params);
//批量重置密码 参数最后转化为 userid[0]:111 userid[1]:2222 userid[2]:333 userid[3]:444 userid[4]:5555
export const resetPwd = params => axios.post('/resetSysUserPasswordByUserId',params);
注意：如果想用es的qs库或者node.js的querystring来编码传的参数数据（具体参数转换效果可查看他们的官方文档解析），只需在用户api的文件（user.js）中按下面的步骤即可，下面以qs进行示范：
1、安装qs库
npm install qs
2、在用户api的文件（user.js）中引入并使用qs库
import {
get,post} from '../axios.js';
import qs from 'qs';
//获取用户list
export const getUserList = params => get('/userList',qs.stringify(params));
//提交用户信息
export const updateUserInfo = params => post('/updateUserInfo',qs.stringify(params));
//批量重置密码 参数最后转化为 userid[]:111 userid[]:2222 userid[]:333 userid[]:444 userid[]:5555
export const resetPwd = params => axios.post('/resetSysUserPasswordByUserId', qs.stringify(data,{
arrayFormat:'brackets'}));
四、axios运用具体页面：比如在user.vue页面进行接口的调用
import {
getUserList, updateUserInfo, resetPwd} from '../../api/user.js';//引入user的api
export default({
name:'user',
data(){
return {
}
},
methods:{
//1、请求用户list
async getUserList(){
let res = await getUserList({
page:1,rows:2 });
},
//2、提交用户信息
async updateUserInfo(){
let res = await updateUserInfo({
name:'zhangsan',age:22 });
},
//3、批量重置密码
async resetPwd(){
//项目引入qs库的情况下，那么上传的数据格式为： userid[]:111 userid[]:2222 userid[]:333 userid[]:444 userid[]:5555
//如果没有引入qs库，那么上传的数据格式为： userid[0]:111 userid[1]:2222 userid[2]:333 userid[3]:444 userid[4]:5555
let res = await resetPwd({
userId:[111,2222,333,444,5555] });
},
}
})