詳解axios中封裝使用、攔截特定請求、判斷所有請求加載完畢）
•基于 Promise 的 HTTP 請求客戶端，可同時(shí)在瀏覽器和 Node.js 中使用
•vue2.0之后，就不再對 vue-resource 更新，而是推薦使用 axios，本項(xiàng)目也是使用 axios
•功能特性
•在瀏覽器中發(fā)送 XMLHttpRequests 請求
•在 node.js 中發(fā)送 http請求
•支持 Promise API
•攔截請求和響應(yīng)
•轉(zhuǎn)換請求和響應(yīng)數(shù)據(jù)
•取消請求
•自動(dòng)轉(zhuǎn)換 JSON 數(shù)據(jù)
•客戶端支持保護(hù)安全免受 CSRF/XSRF（跨站請求偽造） 攻擊
封裝使用
建議拆分三個(gè)文件
•src
-> service
---->axios.js （axios 配置，攔截器、統(tǒng)一 url）
---->index.js （接口方法，里面調(diào)用 api 方法，供頁面級(jí)調(diào)用）
---->api
------->index.js（api 方法，里面調(diào)用后端提供的接口，供接口方法調(diào)用）
axios.js 基本配置
'use strict';
import axios from 'axios';
// 自動(dòng)識(shí)別接口使用開發(fā)環(huán)境地址（開發(fā)環(huán)境地址做了 proxyTable 代理，故設(shè)置為空）或線上地址
axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? process.env.API_ROOT : '';
// 開發(fā)環(huán)境直接打包測試
// axios.defaults.baseURL = '';
axios.interceptors.request.use(config => {
return config;
}, error => {
console.log(error);
return Promise.reject(error);
});
axios.interceptors.response.use(res => {
const apiRes = res.data;
return apiRes;
}, async error => {
console.dir(error);
return Promise.reject(error);
});
export default axios;
api/index.js 調(diào)用后端提供的接口
import Ax from '@/service/axios';
import qs from 'qs';
export default {
fetchBlog (reqData) {
return Ax.get('/krryblog/blog/getBlog', {params: reqData});
},
addBlog (reqData) {
return Ax.post('/krryblog/blog/addBlog', qs.stringify(reqData));
},
updateBlog (reqData) {
return Ax.post('/krryblog/blog/updateBlog', qs.stringify(reqData));
},
deleteBlogCover (id, reqData) {
return Ax.post(`/krryblog/blog/deleteBlogCover/${id}`, qs.stringify(reqData));
},
};
index.js 接口方法（調(diào)用 api）
import Api from './api';
export async function getBlog(reqData) {
let res = await Api.fetchBlog(reqData);
return res;
},
export async function addBlog (reqData) {
let res = await Api.addBlog(reqData);
return res;
},
export async function updateBlog (reqData) {
let res = await Api.updateBlog(reqData);
return res;
},
export async function deleteBlogCover (id, reqData) {
let res = await Api.deleteBlogCover(id, reqData);
return res;
},
頁面調(diào)用
接下來就可以愉快地在頁面調(diào)用了
import { getBlog } from '@/service'
export default {
data() {
return {
tableData: [],
pageIndex: 1,
pageSize: 9
}
},
created() {
this.getList();
},
methods: {
async getList() {
let { result } = await getBlog({
pageIndex: this.pageIndex,
pageSize: this.pageSize
});
this.tableData = result.data;
},
}
axios 執(zhí)行多個(gè)并發(fā)請求
async getList() {
let resArr = []
for (let val of this.arrId) {
// push 請求
resArr.push(queryPropertyValue({ id: val }))
}
this.tableData = []
Promise.all(resArr).then(res => {
for (let val of res) {
let vals = val.result.propertyValues
// 每個(gè)請求的結(jié)果 push 到 tableData
vals.forEach(item => this.tableData.push(item))
}
})
},
或者直接在 axios 寫 promise all
// 根據(jù) id 獲取某一條商品數(shù)據(jù)
let getDetail = (id)=>{
return axios.get(`/detail?bid=${id}`);
}
// 檢測登錄的用戶是否將此商品加入購物車
let detectCar = (shopId,userId)=>{
return axios.get(`/detectCar?shopId=${shopId}&userId=${userId}`);
}
// 獲取一條商品數(shù)據(jù)、并且檢測是否加入購物車
let getDeAll = (shopId,userId)=>{
axios.all([
getDetail(shopId),
detectCar(shopId,userId)
]).then(axios.spread((resDetail, resCar)=>{
// 兩個(gè)請求現(xiàn)已完成
// 打印兩個(gè)請求的響應(yīng)值
console.log(resDetail);
console.log(resCar);
}));
}
•實(shí)例的方法
axios#request(config) axios#get(url [,config]) axios#delete(url [,config]) axios#head(url [,config]) axios#post(url [,data [,config]]) axios#put(url [,data [,config]]) axios#patch(url [,data [,config]])
•請求配置：只有url是必需的，如果未指定方法，請求將默認(rèn)為GET
axios 攔截特定請求
業(yè)務(wù)上經(jīng)常出現(xiàn)這個(gè)問題，需要攔截某些特定請求，在該特定請求，頁面采取或不采取什么變化
研究 axios 的 request 統(tǒng)一攔截方法：axios.interceptors.request.use(function (config) {})
參數(shù) config 如下：
可以發(fā)現(xiàn) config.url 就是請求的接口的地址，那么 “/” 最后的 getClassify 就是該請求的方法，就可以通過取出該字符串來判斷某些特定請求，從而做出怎樣的變化
axios.interceptors.request.use(config => {
// 判斷請求是否是 getClassify，如果是 getClassify，不加載 LoadingBar
let url = config.url;
if (url.split('/').pop() === 'getClassify') {
flag = false;
} else {
iView.LoadingBar.start();
flag = true;
}
return config;
}, error => {
console.log(error);
return Promise.reject(error);
});
如何判斷所有請求加載完畢
let reqNum = 0
axios.interceptors.request.use(function (config) {
// 在請求發(fā)出之前進(jìn)行一些操作，每次發(fā)出請求就 reqNum++
reqNum++
_bus.$emit('showloading')
return config
}
axios.interceptors.response.use(response => {
// 接受請求后 reqNum--，判斷請求所有請求是否完成
reqNum--
if (reqNum <= 0) {
_bus.$emit('closeLoading')
} else {
_bus.$emit('showloading')
}
})
axios 的 post 請求 相關(guān)問題
•如果遇到 post 請求跨域問題，在 webpack 配置文件可以設(shè)置 proxyTable 處理跨域問題
•傳送門：https://ainyi.com/27
•post 請求攜帶參數(shù)，需要做一次序列化：qs.stringify(reqData)
saveNormalAds (reqData) {
return Ax.post('/index.php?krry', qs.stringify(reqData));
},
總結(jié)
以上所述是小編給大家介紹的詳解axios中封裝使用、攔截特定請求、判斷所有請求加載完畢），希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
操作符~， 是按位取反的意思，表面上~~（取反再取反）沒有意義，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-04-04
這篇文章主要介紹了微信公眾平臺(tái)開發(fā)教程（五）詳解自定義菜單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2016-12-12
javascript中Date對象應(yīng)用之簡易日歷實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了javascript中Date對象應(yīng)用之簡易日歷實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-07
JavaScript Sort 的一個(gè)錯(cuò)誤用法示例
這篇文章主要介紹了JavaScript Sort 的一個(gè)錯(cuò)誤用法示例,本文分析了一個(gè)Sort實(shí)例得到了這個(gè)錯(cuò)誤用法并給出了解決方法,需要的朋友可以參考下2015-03-03
JavaScript如何讓select選擇框可輸入和可下拉選擇
我們知道一般select下拉框是只能選擇的,而有時(shí)我們會(huì)遇到下拉框中沒有要選擇的信息項(xiàng)或者下拉選項(xiàng)特別多時(shí),需要允許用戶輸入想要的內(nèi)容,這篇文章主要給大家介紹了關(guān)于JavaScript如何讓select選擇框可輸入和可下拉選擇的相關(guān)資料,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了使用pkg打包ThinkJS項(xiàng)目的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
最好用的Bootstrap fileinput.js文件上傳組件
這篇文章主要為大家詳細(xì)介紹了最好用的Bootstrap fileinput.js文件上傳組件的使用方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
js實(shí)現(xiàn)移動(dòng)端簡易滑動(dòng)表格
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)移動(dòng)端簡易滑動(dòng)表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
layui給下拉框、按鈕狀態(tài)、時(shí)間賦初始值的方法
今天小編就為大家分享一篇layui給下拉框、按鈕狀態(tài)、時(shí)間賦初始值的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
基于JavaScript實(shí)現(xiàn)的折半查找算法示例
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)的折半查找算法,結(jié)合實(shí)例形式分析了折半查找的原理、操作步驟及javascript實(shí)現(xiàn)折半查找的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2017-04-04