詳解axios中封裝使用、攔截特定請求、判斷所有請求加載完畢）

•基于 Promise 的 HTTP 請求客戶端，可同時在瀏覽器和 Node.js 中使用
•vue2.0之后，就不再對 vue-resource 更新，而是推薦使用 axios，本項目也是使用 axios
•功能特性
•在瀏覽器中發(fā)送 XMLHttpRequests 請求
•在 node.js 中發(fā)送 http請求
•支持 Promise API
•攔截請求和響應(yīng)
•轉(zhuǎn)換請求和響應(yīng)數(shù)據(jù)
•取消請求
•自動轉(zhuǎn)換 JSON 數(shù)據(jù)
•客戶端支持保護安全免受 CSRF/XSRF（跨站請求偽造）攻擊

創(chuàng)新互聯(lián)建站主要從事網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)山南,十多年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

封裝使用

建議拆分三個文件

•src
-> service
---->axios.js （axios 配置，攔截器、統(tǒng)一 url）
---->index.js （接口方法，里面調(diào)用 api 方法，供頁面級調(diào)用）
---->api
------->index.js（api 方法，里面調(diào)用后端提供的接口，供接口方法調(diào)用）

axios.js 基本配置

'use strict';
import axios from 'axios';

// 自動識別接口使用開發(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í)行多個并發(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
   // 每個請求的結(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)=>{
  // 兩個請求現(xiàn)已完成
  // 打印兩個請求的響應(yīng)值 
  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 攔截特定請求

業(yè)務(wù)上經(jīng)常出現(xiàn)這個問題，需要攔截某些特定請求，在該特定請求，頁面采取或不采取什么變化

研究 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ā)出之前進行一些操作，每次發(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中封裝使用、攔截特定請求、判斷所有請求加載完畢），希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！

文章題目：詳解axios中封裝使用、攔截特定請求、判斷所有請求加載完畢）
地址分享：http://www.rwnh.cn/article32/jjshpc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、網(wǎng)站導(dǎo)航、動態(tài)網(wǎng)站、移動網(wǎng)站建設(shè)、微信公眾號、網(wǎng)站營銷

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

詳解axios中封裝使用、攔截特定請求、判斷所有請求加載完畢）

詳解axios中封裝使用、攔截特定請求、判斷所有請求加載完畢）