axios的简单封装

前言

最近根据业务要求自己构建了一个vue项目，与后台数据交互用的是axios。axios是基于promise的http库，可以拦截和响应请求，客户端防御XSRF等。

安装axios

npm install axios;

文件划分

在src下新建一个api文件夹，然后在里面新建一个http.js文件。http.js文件用来封装axios

http.js
import axios from 'axios';

//http request 拦截器
axios.interceptors.request.use(
    config =>{
        if(config.method!='get'){
            config.data = JSON.stringify(config.data);
        }
        config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
        
        <!--设置token可以判断是否处于登录状态，每次请求的时候将token带上-->
        let token = window.sessionStorage.getItem("TOKEN");
        if(token){
            config.params = {'token':token}
        }
        return config;
    },
    error =>{
        return Promise.reject(error)
    }
)

注意利用axios的post请求传递数据时：axios.post(url,{xxx:xxx}).then会发生参数错误，得将对象形式转换成字符串键值对形式。

响应拦截器

响应拦截器一般是对状态码进行管理，对不同的状态码返回不同的操作

/ http response 拦截器
axios.interceptors.response.use(
    response =>{
        //自己配置一些状态码
        // if(response.data.errCode == 2){

        // }
        return response;
    },
    error =>{
    //与后台人员协商配置
        return Promise.reject(error)
    }
)

封装get,post方法(put,patch等也差不多)

先说一下get请求的传参方式与post请求传参方式的区别，便于理解后面get,post方法的封装。

get请求
1，可以直接拼在url上
axios.get('/user?id=111')
.then(res=>{
    console.log(res)
})
.catch(err=>{
    console.log(err)
})
2，axios把以键值对的形式放入params对象中
axios.get('/user',{
    params:{
        id:111
    }
})
.then(res=>{
    console.log(res)
})
.catch(err=>{
    console.log(err)
})

post请求：直接将参数放在一个对象当中
axios.post('/user'{
    id:111
})
.then(res=>{
    console.log(res)
})
.catch(err=>{
    console.log(err)
})

正题来了

* 封装get方法
 * @param url 
 * @param params 
 * @returns {Promise}
 */
 export function get(url,params={}){
     return new Promise((resolve,reject)=>{
        axios.get(url,{
            params:params
        })
        .then(res=>{
            resolve(res.data)
        })
        .catch(err=>{
            reject(err)
        })
     })
 }
 
 /**
 * 封装post请求
 * @param url
 * @param params
 * @returns {Promise}
 */
 export function post(url,params = {}){
     return new Promise((resolve,reject)=>{
         axios.post(url,params)
         .then(res=>{
            resolve(res.data)
         })
         .catch(err=>{
            reject(err)
         })
     })
 }

在main.js中引入

import axios from 'axios'
import {get,post} from './api/http'
//定义全局变量
Vue.prototype.$get = get;
Vue.prototype.$post = post;

在组件中使用

let param={}
this.$get('queryParam',param)
    .then(res=>{
        console.log(res)
    })
post方法一样

扩展（这些是后续的一些扩展）

环境配置

项目环境会有开发，测试，生产三个环境。可以通过node的环境变量来匹配默认的接口url前缀。（这个其实我也不懂为啥？？？），可以通过axios.defaults.baseURL设置axios的默认请求地址。

// 环境的切换
if (process.env.NODE_ENV == 'development') {
	axios.defaults.baseURL = 'https://www.baidu.com';}
else if (process.env.NODE_ENV == 'debug') {
	axios.defaults.baseURL = 'https://www.ceshi.com';
}
else if (process.env.NODE_ENV == 'production') {
	axios.defaults.baseURL = 'https://www.production.com';
}

设置请求超时

axios.default.timeout = 10000;