详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)


Posted in Javascript onApril 09, 2019

•基于 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 = 0
axios.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中封装使用、拦截特定请求、判断所有请求加载完毕),希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
动态刷新 dorado树的js代码
Jun 12 Javascript
基于jquery的cookie的用法
Jan 10 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
Apr 06 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
Jan 23 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
jQuery插件扩展测试实例
Jun 21 Javascript
Vue 过渡实现轮播图效果
Mar 27 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 Javascript
Array数组对象中的forEach、map、filter及reduce详析
Aug 02 Javascript
vue 地区选择器v-distpicker的常用功能
Jul 23 Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
Aug 07 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 #Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
Apr 09 #Javascript
Angular脚手架开发的实现步骤
Apr 09 #Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 #Javascript
javascript实现手动点赞效果
Apr 09 #Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
Apr 09 #Javascript
浅谈Vue.js组件(二)
Apr 09 #Javascript
You might like
PL-880隐藏功能
2021/03/01 无线电
如何批量替换相对地址为绝对地址(利用bat批处理实现)
2013/05/27 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
PHP7修改的函数
2021/03/09 PHP
JS input 数字验证代码
2009/07/30 Javascript
Javascript 定时器调用传递参数的方法
2009/11/12 Javascript
js event事件的传递与冒泡处理
2009/12/06 Javascript
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
javascript实用方法总结
2015/02/06 Javascript
jQuery选择器源码解读(八):addCombinator函数
2015/03/31 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
2018/02/26 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
Element Breadcrumb 面包屑的使用方法
2020/07/26 Javascript
Python实现将xml导入至excel
2015/11/20 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
基于python实现对文件进行切分行
2020/04/26 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
Conforama西班牙:您的家具、装饰和电器商店
2020/02/21 全球购物
财务会计专业毕业生自荐信
2013/10/02 职场文书
行政管理人员精品工作推荐信
2013/11/04 职场文书
往来会计岗位职责
2013/12/19 职场文书
春风行动实施方案
2014/03/28 职场文书
小学生综合素质评语
2014/04/23 职场文书
合作意向书
2014/07/30 职场文书
爱护公共设施倡议书
2014/08/29 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
小学生读书笔记
2015/07/01 职场文书
2015中学学校工作总结
2015/07/20 职场文书