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,但依旧会显示请求成功
    }
  })

 

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐