详解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 相关文章推荐
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
Oct 11 Javascript
jQuery实现表头固定效果的实例代码
May 24 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
Aug 13 Javascript
js获取select选中的option的text示例代码
Dec 19 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
Apr 16 Javascript
浅谈javascript的Touch事件
Sep 27 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
Aug 08 Javascript
自制微信公众号一键排版工具
Sep 22 Javascript
windows下vue.js开发环境搭建教程
Mar 20 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
判断“命令按钮”是否被鼠标单击详解
Jul 31 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
星际争霸 Starcraft 编年史
2020/03/14 星际争霸
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
PHP精确计算功能示例
2016/11/29 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
在JavaScript中操作时间之getMonth()方法的使用
2015/06/10 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
2015/11/20 Javascript
Javascript中的对象和原型(二)
2016/08/12 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
2016/12/20 Javascript
jQuery Collapse1.1.0折叠插件简单使用
2017/08/28 jQuery
4个顶级开源JavaScript图表库
2018/09/29 Javascript
vue实现绑定事件的方法实例代码详解
2019/06/20 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
2019/06/27 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
2020/02/21 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
python开发简易版在线音乐播放器
2017/03/03 Python
Python编程使用*解包和itertools.product()求笛卡尔积的方法
2017/12/18 Python
python遍历文件夹下所有excel文件
2018/01/03 Python
python 读文件,然后转化为矩阵的实例
2018/04/23 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
连接pandas以及数组转pandas的方法
2019/06/28 Python
python实现删除列表中某个元素的3种方法
2020/01/15 Python
关于Python 中的时间处理包datetime和arrow的方法详解
2020/03/19 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
出国签证在职证明
2014/09/20 职场文书
公司合并协议书范本
2014/09/30 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
顶岗实习计划书
2015/01/16 职场文书
2015秋学期开学寄语
2015/05/28 职场文书
法院执行局工作总结
2015/08/11 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
基于Python实现股票收益率分析
2022/04/02 Python