使用 Axios 发起 API 请求并设置拦截器

  // eslint-disable-next-line no-unused-vars
    const url = '/api/holiday/year/2022'
    const service = axios.create({
      baseURL: 'https://timor.tech',
      timeout: 5000
    })

这段代码使用 Axios 库发起一个 GET 请求,获取 2022 年节假日信息的 API 数据。代码中定义了一个名为 request 的 Axios 实例,并设置了两个拦截器,一个用于请求,另一个用于响应。

service.interceptors.request.use(config => {
      console.log('config', config)
      config.headers['requestTime'] = new Date().getTime()
      // throw new Error('aaa') 异常传递
      return config
    }, err => {
      Promise.reject(err)
    })

请求拦截器中,通过 config.headers 设置了一个名为 requestTime 的请求头,其值为当前时间的毫秒数。此外,还可以看到一个异常抛出语句 throw new Error('aaa'),但是该语句被注释掉了。

 service.interceptors.response.use(response => {
      if (response.data && response.data.code === 0) {
        return response.data
      } else {
        Promise.reject(response.data.message)
      }
    }, error => {
      Promise.reject(error)
    })

响应拦截器中,对响应进行了判断,如果响应数据的 code 属性为 0,则返回响应数据;否则,通过 Promise.reject() 抛出一个包含响应数据中的 message 属性的错误对象。

  service({
      method: 'get',
      url: url,
      params: { name: 'username', pass: 'pass' },
      headers: { token: 'ADFS' }
    })
      .then(response => {
        console.log('data', response)
      })
      .catch(error => {
        // 捕获传递异常
        console.log(error)
      })

在最后一行代码中,使用 request 发起了一个 GET 请求,其中包含了请求的 URL、参数、请求头等信息。之后,通过 then() 方法处理成功的响应数据,通过 catch() 方法处理发生的错误。如果请求或响应拦截器中抛出了异常,它们将被捕获并传递到 catch() 方法中。