vue axios拦截器常用之重复请求取消

Posted wangmj518

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue axios拦截器常用之重复请求取消相关的知识,希望对你有一定的参考价值。

引言

上一篇介绍了axios的简单封装,知道了axios拦截器的应用场景和方法,今天来看一下对于响应时间过长且请求次数过高的情况拦截器如何处理。

取消请求的方法

Axios使用内部提供的CancelToken来取消请求

官网示例1:用CancelToken.source工厂方法创建 cancel token,像这样

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

const CancelToken = axios.CancelToken;

const source = CancelToken.source();

axios.get('/user/12345',

  cancelToken: source.token

).catch(function(thrown)

  if (axios.isCancel(thrown))

    console.log('Request canceled', thrown.message);

   else

     // 处理错误

  

);

axios.post('/user/12345',

  name: 'new name'

,

  cancelToken: source.token

)

// 取消请求(message 参数是可选的)

source.cancel('Operation canceled by the user.');

官网示例2:通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token:

1

2

3

4

5

6

7

8

9

10

11

12

const CancelToken = axios.CancelToken;

let cancel;

axios.get('/user/12345',

  cancelToken: new CancelToken(function executor(c)

    // executor 函数接收一个 cancel 函数作为参数

    cancel = c;

  )

);

// cancel the request

cancel();

可以看到上面都是在单个请求中创建的 cancel token 实际工作中我们需要对所有的请求都进行处理,接下来我们看下如何在拦截器实现取消请求的功能

拦截器中取消重复请求

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

import axios from 'axios'

import baseURL from './config'

import qs from 'qs'

const pendingRequest = new Map(); // 请求对象

const CancelToken = axios.CancelToken;

axios.defaults.timeout = 30000

axios.defaults.baseURL = baseURL.target

// 添加请求拦截器

axios.interceptors.request.use(function(config)

  // 在发送请求之前做些什么

  config.headers =

      'content-type': 'application/json',

      'token': getToken()

  

  // 获取请求key

  let requestKey = getReqKey(config);

  // 判断是否是重复请求

  if (pendingRequest.has(requestKey)) // 是重复请求

    removeReqKey(requestKey); // 取消

  else

    // 设置cancelToken

    config.cancelToken = new CancelToken(function executor(cancel)

      pendingRequest.set(requestKey, cancel); // 设置

    )

  

  return config;

, function (error)

  // 请求错误

  return Promise.reject(error);

);

// 添加响应拦截器

axios.interceptors.response.use(function (response)

  // 请求对象中删除requestKey

  let requestKey = getReqKey(response.config);

  removeReqKey(requestKey);

  // 对返回数据做点啥 比如状态进行拦截

  if (response.data.status !== 200)

      Toast(

        message: response.data.message,

        type: 'warning',

        duration: 1000

      )

      return

    

     

  // 没问题 返回服务器数据

  return response.data;

, function (error)

  let requestKey = getReqKey(error.config);

  removeReqKey(requestKey);

   

  // 响应错误

  return Promise.reject(error);

);

// 获取请求key

function getReqKey(config)

  // 请求方式、请求地址、请求参数生成的字符串来作为是否重复请求的依据

  const method, url, params, data = config; // 解构出来这些参数

  // GET ---> params  POST ---> data

  const requestKey =  [ method, url, qs.stringify(params), qs.stringify(data)].join('&');

  return requestKey;

// 取消重复请求

function removeReqKey(key)

  const cancelToken = pendingRequest.get(key);

  cancelToken(key); // 取消之前发送的请求

  pendingRequest.delete(key); // 请求对象中删除requestKey

结语

以上就是对重复请求的处理,如果对拦截器不清楚的可以看下上篇文章,有问题欢迎大家提出指正,我会在第一时间更新。

以上是关于vue axios拦截器常用之重复请求取消的主要内容,如果未能解决你的问题,请参考以下文章

Vue+Axios:使用拦截器来取消多次重复的请求

Vue路由切换&Axios接口取消重复请求

axios:基本使用常用配置项create方法请求和响应拦截器取消请求

vue axios请求频繁时取消上一次请求

Axios 拦截器 取消请求

详细介绍axios(配置axios发送请求拦截器取消请求)和axios的源码分析