二次封装axios

为什么要二次封装axios？

axios是一个基于promise的网络请求库，可以方便我们进行网络请求。
二次封装好处：便于我们更好的管理我们的接口，不至于请求接口很多的情况下，出现混乱。
此处，我们针对vue项目来进行我们的axios二次封装。

代码

// 先安装并导入我们的axios库
import axios from 'axios';

vue的配置项需要我们对生产环境、开发环境、测试环境的配置，具体配置如下步骤

*在vue项目里面：在package.json里的scripts里面进行配置，生产环境，开发环境，和测试环境
*生产环境配置："serve:prodocution": "set NODE_ENV=prodocution&&vue-cli-service serve"
*测试环境配置："serve:test": "set NODE_ENV=test&&vue-cli-service serve"
*开发环境："serve":"vue-cli-service serve"

在不同环境下进行对后台接口的选择：

switch (process.env.NODE_ENV) {
    // 生产环境下请求的地址，这里的api地址是随便写的，真实的api为你们手里的
    case "prodocution":
        axios.defaults.baseURL = "http://api.hahahha.com";
        break;
    // 测试环境的后台api
    case "test":
        axios.defaults.bassURL = "http://heihie.com";
        break;
    // 开发环境下的后台api
    default:
        axios.defaults.baseURL = "http://localhost";
        break;
}

设置两个重要的配置项：请求时间和资源凭证

// 设置请求超时的时间
axios.defaults.timeout = 10000;
// 设置CORS跨域允许携带资源凭证
axios.defaults.withCredentials = true;

设置请求头数据的格式（看服务器是什么格式，这里是设置的是x-www-form-urlencoded这种格式）：

axios.defaults.headers["Content-Type"] = 'application/x-www-form-urlencoded';
// 将我们请求的数据转为x-www-form-urlencoded格式，qs是node的一个内置模块，是将我们的data转换为-www-form-urlencoded格式
axios.defaults.transformRequest = data => qs.stringify(data);

设置请求头拦截器，具体一些说明在注释中

/*
*设置请求拦截器
*客户端发送请求 => 【请求拦截器】 => 服务端接收
*token校验(jwt)：接收到服务器返回的token，将他保存在vuex/本地存储里边，
*每一次请求的时候都应该给token带上
*/
axios.interceptors.request.use(config => {
    // 假设我们把token存储到本地存储中的
    let token = localStorage.getItem("token");
    // token 如果存在就加在配置项的头部
    token && (config.headers.Authorization = token);
    // 一定要返回配置项
    return config;
}, error => {
    return Promise.reject(error);
})

设置响应拦截器，具体一些说明在注释里

/*
*响应拦截器
*服务器返回信息 -> 【拦截的统一处理】   ->  客户端js获取到信息
*/
// axios.defaults.validateStatus = state => {
//     // 自定义响应成功的状态码
//     let reg = /^(2|3)\d{2}$/;
//     return reg.test(state);
// }

axios.interceptors.response(response => {
	// 如果回应了就直接return出去
    return response.data;
}, error => {
	// 令失败的响应为error
    let {
        response
    } = error;
    // 如果存在服务器响应
    if (response) {
        // =>服务器最起码返回结果了
        switch(response.status){
            case 401: // =>权限 未登录状态
            	// 这里可以做一些401的操作
                break;
            case 403: // => 服务器拒绝执行（token过期）
            	// 这里可以做一些状态码为403的操作
                break;
            case 404: // => 找不到页面
            	// 这里可以做一些状态码为404的操作
                break;
        }
    } else {
        // =>服务器连结果都没返回
        if (window.navigator.onLine) {
            // 断网处理：可以跳转到断网页面，（可以多创建一个断网的页面）
            return;
        }
        return Promise.reject(error);
    }
})

最后导出我们的axios

export default axios;

总结，二次封装过后的axios可以满足我们在特定需求下进行网络的请求，写的可能不怎么好，大家一起学习，一起进步，谢谢大家！~~