•基于 Promise 的 HTTP 請求客戶端，可同時在瀏覽器和 Node.js 中使用
•vue2.0之后，就不再對 vue-resource 更新，而是推薦使用 axios，本項目也是使用 axios
•功能特性
•在瀏覽器中發送 XMLHttpRequests 請求
•在 node.js 中發送 http請求
•支持 Promise API
•攔截請求和響應
•轉換請求和響應數據
•取消請求
•自動轉換 JSON 數據
•客戶端支持保護安全免受 CSRF/XSRF（跨站請求偽造） 攻擊
封裝使用
建議拆分三個文件
•src
-> service
---->axios.js （axios 配置，攔截器、統一 url）
---->index.js （接口方法，里面調用 api 方法，供頁面級調用）
---->api
------->index.js（api 方法，里面調用后端提供的接口，供接口方法調用）
axios.js 基本配置
'use strict';import axios from 'axios';// 自動識別接口使用開發環境地址（開發環境地址做了 proxyTable 代理，故設置為空）或線上地址axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? process.env.API_ROOT : '';// 開發環境直接打包測試// 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 調用后端提供的接口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 接口方法（調用 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;},頁面調用
接下來就可以愉快地在頁面調用了
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 執行多個并發請求
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 // 每個請求的結果 push 到 tableData vals.forEach(item => this.tableData.push(item)) } })},或者直接在 axios 寫 promise all
// 根據 id 獲取某一條商品數據let getDetail = (id)=>{ return axios.get(`/detail?bid=${id}`);}// 檢測登錄的用戶是否將此商品加入購物車let detectCar = (shopId,userId)=>{ return axios.get(`/detectCar?shopId=${shopId}&userId=${userId}`);}// 獲取一條商品數據、并且檢測是否加入購物車let getDeAll = (shopId,userId)=>{ axios.all([ getDetail(shopId), detectCar(shopId,userId) ]).then(axios.spread((resDetail, resCar)=>{ // 兩個請求現已完成 // 打印兩個請求的響應值 console.log(resDetail); console.log(resCar); }));}•實例的方法
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是必需的，如果未指定方法，請求將默認為GET
axios 攔截特定請求
業務上經常出現這個問題，需要攔截某些特定請求，在該特定請求，頁面采取或不采取什么變化
研究 axios 的 request 統一攔截方法：axios.interceptors.request.use(function (config) {})
參數 config 如下：
可以發現 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 = 0axios.interceptors.request.use(function (config) { // 在請求發出之前進行一些操作，每次發出請求就 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 請求 相關問題
•如果遇到 post 請求跨域問題，在 webpack 配置文件可以設置 proxyTable 處理跨域問題
•傳送門：https://ainyi.com/27
•post 請求攜帶參數，需要做一次序列化：qs.stringify(reqData)
saveNormalAds (reqData) { return Ax.post('/index.php?krry', qs.stringify(reqData));},總結
以上所述是小編給大家介紹的詳解axios中封裝使用、攔截特定請求、判斷所有請求加載完畢），希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
新聞熱點
疑難解答
