axios的封装、配置及使用

背景：一个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] });
         },
    }
})