Vue axios库避免重复发送请求的示例介绍

目录

• 目的
• 文件结构
• 实现
• 请求拦截
• 响应拦截
• 取消重复发送请求
• 调用

目的

• 实现请求拦截
• 实现响应拦截
• 常见错误处理
• 不能请求头设置
• api 集中式管理

(取消重复请求,重复发送请求, 请求缓存等情况均还未实现)

文件结构

实现

index.js内代码如下:

引入

// 引入 axiosimport axios From 'axios';
    // 请求配置单独写一个文件 baseurl.jsimport serverconfig from './baseurl.js'

创建一个实例

const serviceAxios = axios.creat({
	baseURL: serverConfig.baseURL, //基础请求地址    timeout: 1000 , //请求超时设置    wIThCredentials: false, // 跨域请求是否需要携带 cookie }
    )

请求拦截

serviceAxios.interceptors.request.use(    (config) =>
 {
            console.LOG("请求配置", config);
        // 是否使用 Token,         if(serverConfig.useTokenAuthorization) {
                config.headers["Authorization"] = localStorage.getItem("token");
        }
        // 设置请求头        if(config.method === "post") {
                config.headers["content-tyPE"] = "application/x-ww-form-urlencoded";
                // config.data = qs.stringify(config.data);
 //序列化  效果等同于下行代码            config.requestType = "form"        }
 else {
            config.headers["content-type"] = "application/json"        }
        // 返回        return config    }
    ,    (error) =>
 {
        PRomise.reject(error)    }
    )

响应拦截

serviceAxios.interceptors.response.use(    (res) =>
 {
            console.log("响应拦截", res);
            let data = res.data;
            // 处理自己的业务逻辑,如 token 是否过期...        return data;
    }
    ,    (error) =>
 {
            let message = ""        if(error &
    &
 error.response) {
            switch (error.response.status) {
                    case 302:                     message = "接口重定向了! ";
                        break;
                    case 400:                    message = "参数不正确! ";
                        break;
                    case 401:                    message = "您未登录, 或者登录已经超时, 请先登录! "                    break;
                    case 403:                    message = "您还没有权限操作! ";
                        break;
                case 404:                    message = `请求地址出错: ${
error.response.config.url}
    `;
                        break;
                    case 408:                    message = "请求超时! ";
                        break;
                    case 409:                    message = "系统已存在相同数据! "                    break;
                    case 500:                    message = "服务器内部错误! "                    break;
                    case 501:                    message = "服务未实现! "                    break;
                    case 502:                    message = "回答错误! "                    break;
                    case 503:                    message = "服务不可用"                    break;
                    case 504:                    message = "服务暂时无法访问, 请稍后再试"                    break;
                    case 505:                    message = "HTTP 版本不受支持! "                    break;
                    default:                    message = "异常问题, 请联系管理员! "                    break;
            }
        }
            return Promise.reject(message);
    }
    );
    

取消重复发送请求

实现思想

唯一标识值 : 每次发起请求的时候根据请求的方式,请求URL,请求携带参数设置一个唯一标识值.

请求队列: 创建一个map对象储存请求的唯一标识值.

每次发送请求的时候, 在请求拦截中判断请求队列中是否存在这个请求, 存在就说明这个请求正在进行中,那么就取消正在发送的请求,重新发送请求; 不存在就将本次请求加入请求队列中.

在响应拦截中将本次请求从请求队列中移除.

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！