axios請求二次封裝之避免重復(fù)發(fā)送請求

更新時間：2022年10月08日 10:54:08 作者：阿選不出來

在做vue中大型項目的時候,官方推薦使用axios,但是原生的axios可能對項目的適配不友好,所以在工程開始的來封裝一下axios,下面這篇文章主要給大家介紹了關(guān)于axios請求二次封裝之避免重復(fù)發(fā)送請求的相關(guān)資料,需要的朋友可以參考下

前言

Axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。

axios 是目前最優(yōu)秀的 HTTP 請求庫之一, 我們封裝 axios 請求也是為了讓代碼看的更加清晰, 后期好維護.

目的

實現(xiàn)請求攔截
實現(xiàn)響應(yīng)攔截
常見錯誤處理
不能請求頭設(shè)置
api 集中式管理

(取消重復(fù)請求,重復(fù)發(fā)送請求, 請求緩存等情況均還未實現(xiàn))

文件結(jié)構(gòu)

實現(xiàn)

index.js內(nèi)代碼如下:

引入

// 引入 axios
import axios from 'axios';
// 請求配置單獨寫一個文件 baseurl.js
import serverConfig from './baseurl.js'

創(chuàng)建一個實例

const serviceAxios = axios.creat({
	baseURL: serverConfig.baseURL, //基礎(chǔ)請求地址
    timeout: 1000 , //請求超時設(shè)置
    withCredentials: false, // 跨域請求是否需要攜帶 cookie 
})

請求攔截

serviceAxios.interceptors.request.use(
    (config) => {
        console.log("請求配置", config);
        // 是否使用 Token, 
        if(serverConfig.useTokenAuthorization) {
            config.headers["Authorization"] = localStorage.getItem("token");
        }
        // 設(shè)置請求頭
        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)
    }
)

響應(yīng)攔截

serviceAxios.interceptors.response.use(
    (res) => {
        console.log("響應(yīng)攔截", res);
        let data = res.data;
        // 處理自己的業(yè)務(wù)邏輯,如 token 是否過期...
        return data;
    },
    (error) => {
        let message = ""
        if(error && error.response) {
            switch (error.response.status) {
                case 302: 
                    message = "接口重定向了! ";
                    break;
                case 400:
                    message = "參數(shù)不正確! ";
                    break;
                case 401:
                    message = "您未登錄, 或者登錄已經(jīng)超時, 請先登錄! "
                    break;
                case 403:
                    message = "您還沒有權(quán)限操作! ";
                    break;
                case 404:
                    message = `請求地址出錯: ${error.response.config.url}`;
                    break;
                case 408:
                    message = "請求超時! ";
                    break;
                case 409:
                    message = "系統(tǒng)已存在相同數(shù)據(jù)! "
                    break;
                case 500:
                    message = "服務(wù)器內(nèi)部錯誤! "
                    break;
                case 501:
                    message = "服務(wù)未實現(xiàn)! "
                    break;
                case 502:
                    message = "回答錯誤! "
                    break;
                case 503:
                    message = "服務(wù)不可用"
                    break;
                case 504:
                    message = "服務(wù)暫時無法訪問, 請稍后再試"
                    break;
                case 505:
                    message = "HTTP 版本不受支持! "
                    break;
                default:
                    message = "異常問題, 請聯(lián)系管理員! "
                    break;
            }
        }
        return Promise.reject(message);
    }
);

取消重復(fù)發(fā)送請求

實現(xiàn)思想

唯一標(biāo)識值 : 每次發(fā)起請求的時候根據(jù)請求的方式,請求URL,請求攜帶參數(shù)設(shè)置一個唯一標(biāo)識值.

請求隊列: 創(chuàng)建一個map對象儲存請求的唯一標(biāo)識值.

每次發(fā)送請求的時候, 在請求攔截中判斷請求隊列中是否存在這個請求, 存在就說明這個請求正在進行中,那么就取消正在發(fā)送的請求,重新發(fā)送請求; 不存在就將本次請求加入請求隊列中.

在響應(yīng)攔截中將本次請求從請求隊列中移除.

??生成唯一標(biāo)識值函數(shù)

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

??將請求加入請求隊列函數(shù)

const reqQueue = new Map();
function addreqQueue(config){
    //調(diào)用生成唯一標(biāo)識值函數(shù), 生成 requestKey
    const requestKey = regsoleKey(config);
    //為每個請求創(chuàng)建一個專屬的 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){
    // 標(biāo)識值
    const requestKey = generateReqKey(config);
    
    if(reqQueue.has(requestKey)){
        // 取消之前發(fā)出請求
       const cancelToken = reqQueue.get(requestKey);
       cancelToken(requestKey);
        // 從隊列移除
       reqQueue.delete(requestKey);
    }
}

??請求攔截器

serviceAxios.interceptors.request.use(
	function(config) {
		removereqQueue(config); // 檢查是否重復(fù)發(fā)送請求
		addreqQueue(config); //將本次請求加入請求隊列
		return config
	},
	(error) => {
		return Promise.reject(error)
	}
)

??響應(yīng)攔截器

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,
    })
}

調(diào)用

如何在原生js文件內(nèi)調(diào)用?

首先引入axios文件

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

再引入帶有axios請求的js文件, 請求文件內(nèi)使用es6新語法按需引入api.js文件

例:

import {useRouter} from '../../router/app.js'

如何在Vue文件內(nèi)使用?

示例:

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