详解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 相关文章推荐
五段实用的js高级技巧
Dec 20 Javascript
根据json字符串生成Html的一种方式
Jan 09 Javascript
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
三种检测iPhone/iPad设备方向的方法
Apr 23 Javascript
javascript面向对象快速入门实例
Jan 13 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 Javascript
聊一聊JS中的prototype
Sep 29 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
Mar 02 Javascript
Element Cascader 级联选择器的使用示例
Jul 27 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
一个SQL管理员的web接口
2006/10/09 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
thinkPHP框架对接支付宝即时到账接口回调操作示例
2016/11/14 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
pjblog中的UBBCode.js
2007/04/25 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
js中split和replace的用法实例
2015/02/28 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
jQuery中$(function() {});问题详解
2015/08/10 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
很棒的vue弹窗组件
2017/05/24 Javascript
浅析vue插槽和作用域插槽的理解
2019/04/22 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
2019/07/09 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
2019/11/19 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
2020/02/27 Javascript
原生小程序封装跑马灯效果
2020/10/21 Javascript
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
windows下安装python paramiko模块的代码
2013/02/10 Python
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
对python制作自己的数据集实例讲解
2018/12/12 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
python scrapy爬虫代码及填坑
2019/08/12 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
2020/04/16 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
印尼在线旅游门户网站:NusaTrip
2019/11/01 全球购物
企业申诉管理制度
2014/01/30 职场文书
卫生院健康教育实施方案
2014/06/07 职场文书
2014年秋季开学典礼致辞
2014/08/02 职场文书
班级活动总结格式
2014/08/30 职场文书
毕业晚宴祝酒词
2015/08/11 职场文书
Pytest中skip skipif跳过用例详解
2021/06/30 Python
MySQL实现字段分割一行转多行的示例代码
2022/07/07 MySQL