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

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

目的

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

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

文件结构

实现

index.js内代码如下:

引入

// 引入 axios
import axios  From  'axios';
// 请求配置单独写一个文件 baseurl.js
import server config  f rom  './baseurl.js'

创建一个实例

const serviceAxios = axios.creat({
	baseURL: serverConfig.baseURL, //基础请求地址
    timeout: 1000 , //请求超时设置
    w IT hC red entials: 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 -t y PE "] = "application/x-ww-form-url encoded ";
            // config.data = qs.stringify(config.data); //序列化  效果等同于下行代码
            config.requestType = "form"
        } else {
            config.headers["content-type"] = "application/json"
        }
        // 返回
        return config
    },
    (error) => {
         PR omise.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. stat us) {
                case 302: 
                    message = "接口重定向了! ";
                     br eak;
                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对象储存请求的唯一标识值.

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

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

总结

以上是 为你收集整理的 Vue axios库避免重复发送请求的示例介绍 全部内容，希望文章能够帮你解决 Vue axios库避免重复发送请求的示例介绍 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于Vue axios库避免重复发送请求的示例介绍的详细内容...