摘要:新建文件,設置請求攔截和處理的邏輯取消請求設置默認請求頭,如果不需要可以取消這一步請求超時的時間限制開始設置請求發起的攔截處理代表發起請求的參數的實體得到參數中的字段,用于決定下次發起請求,取消對應的相同字段的請求如果沒有就默認添加一個
1. 新建 axiosTool.js 文件,設置請求攔截和處理的邏輯
import Vue from "vue" import axios from "axios" //取消請求 let CancelToken = axios.CancelToken //設置默認請求頭,如果不需要可以取消這一步 axios.defaults.headers = { "X-Requested-With": "XMLHttpRequest" } // 請求超時的時間限制 axios.defaults.timeout = 20000 // 開始設置請求 發起的攔截處理 // config 代表發起請求的參數的實體 axios.interceptors.request.use(config => { // 得到參數中的 requestName 字段,用于決定下次發起請求,取消對應的 相同字段的請求 // 如果沒有 requestName 就默認添加一個 不同的時間戳 let requestName if(config.method === "post"){ if(config.data && config.data.requestName){ requestName = config.data.requestName }else{ requestName = new Date().getTime() } }else{ if(config.params && config.params.requestName){ requestName = config.params.requestName }else{ requestName = new Date().getTime() } } // 判斷,如果這里拿到的參數中的 requestName 在上一次請求中已經存在,就取消上一次的請求 if (requestName) { if (axios[requestName] && axios[requestName].cancel) { axios[requestName].cancel() } config.cancelToken = new CancelToken(c => { axios[requestName] = {} axios[requestName].cancel = c }) } return config }, error => { return Promise.reject(error) }) // 請求到結果的攔截處理 axios.interceptors.response.use(config => { // 返回請求正確的結果 return config }, error => { // 錯誤的請求結果處理,這里的代碼根據后臺的狀態碼來決定錯誤的輸出信息 if (error && error.response) { switch (error.response.status) { case 400: error.message = "錯誤請求" break case 401: error.message = "未授權,請重新登錄" break case 403: error.message = "拒絕訪問" break case 404: error.message = "請求錯誤,未找到該資源" break case 405: error.message = "請求方法未允許" break case 408: error.message = "請求超時" break case 500: error.message = "服務器端出錯" break case 501: error.message = "網絡未實現" break case 502: error.message = "網絡錯誤" break case 503: error.message = "服務不可用" break case 504: error.message = "網絡超時" break case 505: error.message = "http版本不支持該請求" break default: error.message = `連接錯誤${error.response.status}` } } else { error.message = "連接到服務器失敗" } return Promise.reject(error.message) }) // 將axios 的 post 方法,綁定到 vue 實例上面的 $post Vue.prototype.$post = function (url, params) { return new Promise((resolve, reject) => { axios.post(url, params) .then(res => { resolve(res) }).catch(err => { reject(err) }) }) } // 將axios 的 get 方法,綁定到 vue 實例上面的 $get Vue.prototype.$get = function (url, params) { return new Promise((resolve, reject) => { axios.get(url, { params: params }).then(res => { resolve(res) // 返回請求成功的數據 data }).catch(err => { reject(err) }) }) } // 請求示例 // requestName 為多余的參數 作為請求的標識,下次發起相同的請求,就會自動取消上一次還沒有結束的請求 // 比如正常的請求參數只有一個 name: "123",但是這里我們需要額外再加上一個 requestName /** this.$post(url, { name: "123", requestName: "post_1" }) .then(res => { console.log(`請求成功:${res}`) }) */ export default axios
2. 再 main.js 中引入該文件
import { axios } from "./static/js/axiosTool"
3. 在組件中直接使用即可
this.$post(this.url2, { name: "王", docType: "pson", requestName: "name02" }).then(res => { console.log(res) }) this.$get(this.url, { name: "李", requestName: "name01" }).then(res => { console.log(res) })
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/98660.html
摘要:新建文件,設置請求攔截和處理的邏輯取消請求設置默認請求頭,如果不需要可以取消這一步請求超時的時間限制開始設置請求發起的攔截處理代表發起請求的參數的實體得到參數中的字段,用于決定下次發起請求,取消對應的相同字段的請求如果沒有就默認添加一個 1. 新建 axiosTool.js 文件,設置請求攔截和處理的邏輯 import Vue from vue import axios from ax...
摘要:攔截重復請求如何標識每個請求下面函數,通過一個請求參數中的請求傳遞參數或請求傳遞參數來表示每一個請求。 一直想封裝一下 axios, 可以方便項目中使用,今天有時間,就好好研究了一下。 源碼: // util/axios.js import axios from axios const pending = {} const CancelToken = axios.CancelTok...
摘要:時隔一年再次更新下根據項目下常見業務場景對的二次封裝功能實現兼容瀏覽器避免緩存減少或更新重復請求接口域名使用環境變量全局狀態可關閉的全局錯誤提醒可開啟攜帶全局分頁參數攔截器請求攔截器請求開始請求出錯響應攔截器請求結束請求錯誤處理網絡請求中, 時隔一年再次更新下根據vue項目下常見業務場景對axios的二次封裝 功能實現:1.兼容ie瀏覽器避免緩存2.減少或更新重復請求3.接口域名使用環...
摘要:使用了攔截器處理相關問題,這樣就不再需要使用來做錯誤的處理。萬惡的攔截器一些處理無論是對成功的處理還是對失敗的處理,如果攔截器不拋出錯誤,那么終將還會執行里面處理請求成功的函數,即使你返回。 一 前言 本文適合剛接觸axios或者使用過幾次的同學來分享交流一些入門經驗,本文同樣適用熟悉axios的同學來作為參考手冊。默認你已經看過axios的相關文檔:axios文檔 GitHub,通過...
閱讀 2843·2023-04-26 01:02
閱讀 1863·2021-11-17 09:38
閱讀 791·2021-09-22 15:54
閱讀 2899·2021-09-22 15:29
閱讀 888·2021-09-22 10:02
閱讀 3432·2019-08-30 15:54
閱讀 2007·2019-08-30 15:44
閱讀 1586·2019-08-26 13:46