Axios 并发请求添加token 值_axios get请求添加token

测试具体代码如下

import axios from 'axios'

// 待重试的请求队列
let requestsQueue: Function[] =  []
// 正在请求token的标志值
let isFreshToken = false

// 从接口获取token值
function getToken () {
 return  http.get('/api/token').then(res => {
   return res.data.data.result
 })
}

const getSToken = () =>{
  return sessionStorage.getItem('__token__')
}

const setSToken = (token: string) =>{
  return sessionStorage.setItem('__token__', token)
}

const http = axios.create({
  timeout: 3000
})

http.interceptors.request.use((config) 









=> {
   // 请求 token URL 直接放行
   if(config.url?.match('token')) {
    return config
   }
   config.url = `${config.url}?t=${new Date().getTime()}`
  // 从sessionStorage 中获取 token 
  const crsfToken =  getSToken()
  // 当token 没有的时候 就去请求token
  if(!crsfToken) {
    if(!isFreshToken){
      isFreshToken = true
      getToken().then(token => {
        setSToken(token)
        requestsQueue.forEach(cb => {
          cb(token)
        })
        requestsQueue = []
      }).finally(() => {
        isFreshToken = false
      })
    }
    // 将config 存储在 requestsQueue 刷新队列中
    return new Promise(resolve => {
      requestsQueue.push(token => {
        config.headers['x-crsf-token'] = token
        resolve(config)
      })
    })
  }
  config.headers['x-crsf-token'] = crsfToken
  return config

})


http.interceptors.response.use(res =>{
  return res;
})
export  default  http
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