axios paramsSerializer没执行 axios.spread(callback)

文章目录

• 一、并发请求
• 二、队列请求
• 三、拦截器
• 四、取消请求
• 未完待续....

---

一、并发请求

axios.all()、axios.spread()两个辅助函数用于处理同时发送多个请求，可以实现在多个请求都完成后再执行一些逻辑

实现步骤
1.封装一个api.js文件

import axios from 'axios'
const api = {
    getTestList5s () {
      return ajax(`http://yapi.xxx.com/mock/164/timeout/response5`, 'get')
    },
    getTestList2s (params) {
      return ajax(`http://yapi.xxx.com/mock/164/timeout/response2`, 'get', { params })
    },
}
export default api

2.页面调用

<template>
  <div>
	请求响应的时间为：{{time}}
  </div>
</template>
import api from '@/api'
data () {
    return {
      time: 0,
      timer: null
    }
},
mounted () {
    const that = this
    that.getAllApi()
    this.timer = setInterval(() => {
      that.time += 1
    }, 1000)
},
methods: {
	getAllApi () {
      axios.all([api.getTestList5s(), api.getTestList2s()]).then(
        axios.spread((r, g) => {
          console.log('结果', r, g);
          clearInterval(this.timer)
          this.timer = null
        })
      )
    },
},

3.实现思路和结果

首先写了一个定时器记录请求到响应的总时长，然后调用2个具有延迟的接口，一个是延迟5秒一个是延迟2秒。Console和Network结果如下：

---

总结
axios并发调用2个接口，响应的时间取决于耗时最长的接口。

---

二、队列请求

实现步骤

1.实现步骤的基础代码同并发请求一致

mounted () {
    const that = this
    that.getOrderApi()
    this.timer = setInterval(() => {
      that.time += 1
    }, 1000)
},
methods: {
	// 队列请求接口，第1个接口的结果作为请求第二个接口的参数
	async getOrderApi () {
      const res1 = await api.getTestList5s()
      console.log('res1', res1);
      const params = {
        id: res1.data.id
      }
      const res2 = await api.getTestList2s(params)
      console.log('res2', res2);
      if (res2) {
        clearInterval(this.timer)
        this.timer = null
      }
    }
},

3.实现思路和结果

首先写了一个定时器记录请求到响应的总时长，然后调用2个具有延迟的接口，一个是延迟5秒一个是延迟2秒。第1个接口的结果作为请求第二个接口的参数，Console和Network结果如下：

---

总结
队列请求的顺序遵循先进先出原则，延迟2秒的接口再快也要等延迟5秒的接口响应，获取到数据之后再执行，请求的总时长也是2个接口相加的总和。

---

三、拦截器

axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
	console.log('请求拦截器1', );
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });
  axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
	console.log('请求拦截器2', );
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });
  axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
	console.log('响应拦截器1');
	response.data.myselfData = '我自己的数据'
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });
  axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
	console.log('响应拦截器2');
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });
  axios.get('http://yapi.xxxxx.com/mock/164/zzc/goodsList')
  .then(function(response) {
    console.log('请求',response);
  });

1.实现思路和结果

axios源码中实现代码

// Hook up interceptors middleware
  var chain = [dispatchRequest, undefined];
  var promise = Promise.resolve(config);

  this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
    chain.unshift(interceptor.fulfilled, interceptor.rejected);
  });

  this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
    chain.push(interceptor.fulfilled, interceptor.rejected);
  });

  while (chain.length) {
    promise = promise.then(chain.shift(), chain.shift());
  }

实现的大概思路：设置一个数组，循环数组中基于promise的请求和拦截器。请求拦截器通过unshift添加到数组的头部，响应拦截器通过push添加到数组的尾部，所以上面的例子，请求拦截器2会先执行。

---

四、取消请求

const cancel = null
const CancelToken = axios.CancelToken
const params = {}
axios.get(`http://yapi.xxxx.com/mock/164/timeout/response2`,
	{
	cancelToken: new CancelToken(function executor (c) {
		this.cancel = c
	}),
	params: params
	}).then((res) => {
		console.log('success', res);
}).catch((error)=>{
	console.log('fail', error);
})
setTimeout(()=>{
	this.cancel()
},2000)

1.实现思路

修改promise状态，调用了 XMLHttpRequest 的 abort()

未完待续…