文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-02-15 12:00

关注

目的

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

文件结构

实现

index.js内代码如下:

引入

// 引入 axios
import axios from 'axios';
// 请求配置单独写一个文件 baseurl.js
import 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对象储存请求的唯一标识值.

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

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

?生成唯一标识值函数

import qs from 'qs'
function regsoleKey(config){
    const {method, url, params, data } = config;
    return [method, url, qs.stringify(params), qs.stringify(data)].join('&')
}

?将请求加入请求队列函数

const reqQueue = new Map();
function addreqQueue(config){
    //调用生成唯一标识值函数, 生成 requestKey
    const requestKey = regsoleKey(config);
    //为每个请求创建一个专属的 CancelToken(用于取消请求)
    config.cancelToken = config.cancelToken || new axios.CancelToken((cancel)=>{
        // 判断 reqQueue 中是否含有 requestKey, 
        // 将 requestKey 与 CancelToken 以键值对的形式保存到map对象中
        if(!reqQueue.has(requestKey)){
            reqQueue.set(requestKey,cancel)
        }
    });
}

?将请求从请求队列移除

function removereqQueue(config){
    // 标识值
    const requestKey = generateReqKey(config);
    if(reqQueue.has(requestKey)){
        // 取消之前发出请求
       const cancelToken = reqQueue.get(requestKey);
       cancelToken(requestKey);
        // 从队列移除
       reqQueue.delete(requestKey);
    }
}

?请求拦截器

serviceAxios.interceptors.request.use(
	function(config) {
		removereqQueue(config); // 检查是否重复发送请求
		addreqQueue(config); //将本次请求加入请求队列
		return config
	},
	(error) => {
		return Promise.reject(error)
	}
)

?响应拦截器

serviceAxios.interceptors.response.use(
	(res) => {
		removereqQueue(res.config); //请求从请求队列移除
		return res
	},
	(error) => {
		removereqQueue(error.config || {}); //请求从请求队列移除
		//....
	}
)
// 最后export default serviceAxios

baseurl.js代码如下

const serverConfig = {
    baseURL: 'https://fm-emo-music-api.vercel.app',
    useTokenAuthorization: true, //是否开启 token 验证
}
export default serverConfig

api.js代码如下

// 引入index.js
import serviceAxios from './index.js'
// get实例
export const VideoRecommendLike = (params) => {
    return serviceAxios({
        method: "get",
        url: "/dj/personalize/recommend",
        params,
    })
}
// post实例
export const ConfirmPhone = (data) =>{
    return serviceAxios({
        method: "post",
        url: "/captcha/sent",
        data,
    })
}

调用

如何在原生js文件内调用?

首先引入axios文件

    <!-- axios请求文件 -->
    <script src="/src/utils/axios.js"></script>

再引入带有axios请求的js文件, 请求文件内使用es6新语法按需引入api.js文件

例:

import {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->useRouter} from '../../router/app.js'

如何在Vue文件内使用?

示例:

  // 按需引入请求接口
    import {emailCounts} from "@/api/api.js"
    export default {
    	...
    	// 异步进行axios请求
    	methods: {
    		async comein(){
    			let res = await emailCount(params)
    			console.log(res)
    		}
		}
    }

到此这篇关于Vue axios库避免重复发送请求的示例介绍的文章就介绍到这了,更多相关Vue避免重复发送请求内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯