0
点赞
收藏
分享

微信扫一扫

二次封装axios

云卷云舒xj 2022-04-21 阅读 71

为什么要二次封装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可以满足我们在特定需求下进行网络的请求,写的可能不怎么好,大家一起学习,一起进步,谢谢大家!~~

举报

相关推荐

axios 二次封装

axios的二次封装

Axios 二次封装详解

二次封装axios并使用

0 条评论