axios使用总结（一）_axios transformresponse-优快云博客

本文链接：https://blog.youkuaiyun.com/smaller_coder/article/details/106417911

本文深入探讨Axios库的高级配置，包括baseURL、timeout的设置，transformRequest和transformResponse的功能，请求与响应拦截器的使用，axios.all并发请求处理，及validateStatus状态码自定义。这些配置能显著提升网络请求的效率与灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、baseURL、timeout

axios.create({ 
baseURL:'', 
timeout:500     // 链接超时  当发送时间超过1秒就不再发送了

})

2、transformRequest 在发送到服务器前，对参数进行拦截、修改请求数据

axios.create({

    baseURL:'', 
    transformRequest: [function (data) { // `transformRequest` 允许在向服务器发送前，修                        改请求数据 // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法 
    data.sex = 'man' 
    return qs.stringify(data) // 结合create_headers里的内容，在这里又新增一条信息sex=man         // 因此network中查看的结果是：name=xiaoming&age=12&sex=man 
    }], 

})

3、transformResponse 在传递给 then/catch 前，允许修改响应数据

  let http = axios.create({

    baseURL: 'https://www.easy-mock.com/mock/5d41580a1a802c0d5e53dcc2/example/',
    // 可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
    transformResponse: [function (data) {
      // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
      data = '2222'
      return data
    }]
  })

4、interceptors 请求拦截器

instance.interceptors.request.use(
  config => {
    const token = sessionStorage.getItem('token')
    if (token ) { // 判断是否存在token，如果存在的话，则每个http header都加上token
      config.headers.authorization = token  //请求头加上token
    }
    return config
  },
  err => {
    return Promise.reject(err)
  })

5、interceptors 响应拦截器

// http response 拦截器
instance.interceptors.response.use(
  response => {
    //拦截响应，做统一处理 
    if (response.data.code) {
      switch (response.data.code) {
        case 1002:
          store.state.isLogin = false
          router.replace({
            path: 'login',
            query: {
              redirect: router.currentRoute.fullPath
            }
          })
      }
    }
    return response
  },
  //接口错误状态处理，也就是说无响应时的处理
  error => {
    return Promise.reject(error.response.status) // 返回接口返回的错误信息
  })

6、axios.all

 getUrl () {
        return axios.get('https://www.easy-mock.com/mock/5d41580a1a802c0d5e53dcc2/example/aa')
      },
      postUrl () {
        return axios.post('https://www.easy-mock.com/mock/5d41580a1a802c0d5e53dcc2/example/bb')
      },
      allUrl () {
        axios.all([this.getUrl(), this.postUrl()])
          // 注意里面是一个数组，不要出错
          .then(axios.spread((res1, res2) => {
            // 注意里面是箭头函数，容易出错
            // res1是getUrl获取的， res2是postUrl获取的
            console.log(res1.data, res2.data)
          }))
      }

7、validateStatus状态码

 // axios配置
  let http = axios.create({
    baseURL: 'https://www.easy-mock.com/mock/5d41580a1a802c0d5e53dcc2/example/',
    // 可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL

    validateStatus: function (status) {
      // 更改状态码 不怎么用
      return status === 404
      // 此时设置成功状态码是404，所以就算地址错误，报404，但依旧会显示请求成功
    }
  })