您好,登錄后才能下訂單哦!
本篇文章為大家展示了如何實(shí)現(xiàn)二次封裝axios并根據(jù)實(shí)現(xiàn)多個(gè)請(qǐng)求多次攔截,代碼簡(jiǎn)明扼要并且容易理解,絕對(duì)能使你眼前一亮,通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。
1、新建 axiosTool.js 文件,設(shè)置請(qǐng)求攔截和處理的邏輯
import Vue from 'vue' import axios from 'axios' //取消請(qǐng)求 let CancelToken = axios.CancelToken //設(shè)置默認(rèn)請(qǐng)求頭,如果不需要可以取消這一步 axios.defaults.headers = { 'X-Requested-With': 'XMLHttpRequest' } // 請(qǐng)求超時(shí)的時(shí)間限制 axios.defaults.timeout = 20000 // 開(kāi)始設(shè)置請(qǐng)求 發(fā)起的攔截處理 // config 代表發(fā)起請(qǐng)求的參數(shù)的實(shí)體 axios.interceptors.request.use(config => { // 得到參數(shù)中的 requestName 字段,用于決定下次發(fā)起請(qǐng)求,取消對(duì)應(yīng)的 相同字段的請(qǐng)求 // 如果沒(méi)有 requestName 就默認(rèn)添加一個(gè) 不同的時(shí)間戳 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() } } // 判斷,如果這里拿到的參數(shù)中的 requestName 在上一次請(qǐng)求中已經(jīng)存在,就取消上一次的請(qǐng)求 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) }) // 請(qǐng)求到結(jié)果的攔截處理 axios.interceptors.response.use(config => { // 返回請(qǐng)求正確的結(jié)果 return config }, error => { // 錯(cuò)誤的請(qǐng)求結(jié)果處理,這里的代碼根據(jù)后臺(tái)的狀態(tài)碼來(lái)決定錯(cuò)誤的輸出信息 if (error && error.response) { switch (error.response.status) { case 400: error.message = '錯(cuò)誤請(qǐng)求' break case 401: error.message = '未授權(quán),請(qǐng)重新登錄' break case 403: error.message = '拒絕訪問(wèn)' break case 404: error.message = '請(qǐng)求錯(cuò)誤,未找到該資源' break case 405: error.message = '請(qǐng)求方法未允許' break case 408: error.message = '請(qǐng)求超時(shí)' break case 500: error.message = '服務(wù)器端出錯(cuò)' break case 501: error.message = '網(wǎng)絡(luò)未實(shí)現(xiàn)' break case 502: error.message = '網(wǎng)絡(luò)錯(cuò)誤' break case 503: error.message = '服務(wù)不可用' break case 504: error.message = '網(wǎng)絡(luò)超時(shí)' break case 505: error.message = 'http版本不支持該請(qǐng)求' break default: error.message = `連接錯(cuò)誤${error.response.status}` } } else { error.message = "連接到服務(wù)器失敗" } return Promise.reject(error.message) }) // 將axios 的 post 方法,綁定到 vue 實(shí)例上面的 $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 實(shí)例上面的 $get Vue.prototype.$get = function (url, params) { return new Promise((resolve, reject) => { axios.get(url, { params: params }).then(res => { resolve(res) // 返回請(qǐng)求成功的數(shù)據(jù) data }).catch(err => { reject(err) }) }) } // 請(qǐng)求示例 // requestName 為多余的參數(shù) 作為請(qǐng)求的標(biāo)識(shí),下次發(fā)起相同的請(qǐng)求,就會(huì)自動(dòng)取消上一次還沒(méi)有結(jié)束的請(qǐng)求 // 比如正常的請(qǐng)求參數(shù)只有一個(gè) name: '123',但是這里我們需要額外再加上一個(gè) requestName /** this.$post(url, { name: '123', requestName: 'post_1' }) .then(res => { console.log(`請(qǐng)求成功:${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) })
上述內(nèi)容就是如何實(shí)現(xiàn)二次封裝axios并根據(jù)實(shí)現(xiàn)多個(gè)請(qǐng)求多次攔截,你們學(xué)到知識(shí)或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。