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

2019-12-16 15:15:50

参考地址 axios(封装使用、拦截特定请求、判断所有请求加载完毕)


  • 基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 Node.js 中使用

  • vue2.0之后,就不再对 vue-resource 更新,而是推荐使用 axios,本项目也是使用 axios

  • 功能特性

  1. 在浏览器中发送 XMLHttpRequests 请求

  2. 在 node.js 中发送 http请求

  3. 支持 Promise API

  4. 拦截请求和响应

  5. 转换请求和响应数据

  6. 取消请求

  7. 自动转换 JSON 数据

  8. 客户端支持保护安全免受 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 如下:
p_70.png

可以发现 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);
});

如何判断所有请求加载完毕

判断所有请求加载完毕,可以解决这个问题:在刚开始第一个请求,加载 loading 动画,所有请求加载完成后,关闭 loading 动画

let reqNum = 0axios.interceptors.request.use(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));
},


  • 2019-10-09 14:39:40

    import双反斜杠\\的意思

    ​ \表示引用根目录下面的PHPEXcel;不用\的话是引用当前目录下面的 PHPExcel

  • 2019-10-09 15:33:31

    nuxt,nuxtjs简单介绍以及使用

    在集成的服务器端框架之间进行选择: 选择您喜欢的 UI 框架: 选择您喜欢的测试框架: 选择你想要的 Nuxt 模式 (Universal or SPA) 添加 axios module 以轻松地将 HTTP 请求发送到您的应用程序中。 添加 EsLint 以在保存时代码规范和错误检查您的代码。 添加 Prettier 以在保存时格式化/美化您的代码。

  • 2019-10-10 00:21:35

    laravel 5.6以上日志理解及日志格式定义

    Laravel/Lumen的日志默认是基于Monolog进行了一层封装,如果要求不高,用起来还是十分容易的,本文基于laravel5.6/Lumen5.6版本进行解说。5.6版对日志系统做了升级,将日志的配置单独放以了config/logging.php 配置文件中,所以现在实用多了。

  • 2019-10-10 10:10:49

    @Scheduled注解各参数详解

    每隔5秒执行一次:*/5 * * * * ? 每隔1分钟执行一次:0 */1 * * * ? 每天23点执行一次:0 0 23 * * ? 每天凌晨1点执行一次:0 0 1 * * ? 每月1号凌晨1点执行一次:0 0 1 1 * ? 每月最后一天23点执行一次:0 0 23 L * ? 每周星期天凌晨1点实行一次:0 0 1 ? * L 在26分、29分、33分执行一次:0 26,29,33 * * * ? 每天的0点、13点、18点、21点都执行一次:0 0 0,13,18,21 * * ?

  • 2019-10-10 11:07:47

    Java8 - Map更优雅的迭代方式:forEach

    用于两个参数之间进行操作的函数式接口是 BiConsumer。这个函数式接口正好用来操作 Map 的 key 和 value。JDK8强化了针对 Map 类的迭代方式,新增了一个默认方法 forEach,它接收一个 BiConsumer 函数。JDK给出的描述如下:

  • 2019-10-11 13:48:00

    关于Integer比较相等的问题

    原来两个Integer类型的数字不能用==来判断,要用equal 不过Integer类型的可以与1,2这样的纯数字来判断