需求分析

在之前处理响应结果中， 认为 HTTP 响应码在 200 - 300 之间是一个合法值，在这个区间之外创建一个错误。有时候想自定义这个规则，比如认为 304 也是一个合法的状态码。所以希望能提供一个配置，允许自定义合法状态码的规则。

如下：

axios.get('/more/304', {
  validateStatus(status) {
    return status >= 200 && status < 400
  }
}).then(res => {
  console.log(res)
}).catch((e: AxiosError) => {
  console.log(e.message)
})

通过在请求配置中配置一个 validateStatus 函数，可以根据参数 status 来自定义合法状态码的规则。

代码实现

修改 AxiosRequestConfig 类型定义：

export interface AxiosRequestConfig {
  // ...
  
  validateStatus?: (status: number) => boolean
}

然后修改默认配置规则， src/defaults.ts ：

const defaults: AxiosRequestConfig = {
  
  // ...
  
  validateStatus(status: number): boolean {
    return status >= 200 && status < 300
  }
}

添加一个默认的合法状态码的校验规则，然后再请求后对相应数据的处理逻辑。

修改 src/core/xhr.ts ：

export default function xhr(config: AxiosRequestConfig): AxiosPromise {
  return new Promise((resolve, reject) => {
    const {
      // ...
      validateStatus
    } = config

    function handleResponse(response: AxiosResponse) {
      if (!validateStatus || validateStatus(response.status)) {
        resolve(response)
      } else {
        reject(
          createError(
            `Request failed with status code ${response.status}`,
            config,
            null,
            request,
            response
          )
        )
      }
    }
	)}
}

将 validateStatus 用于响应状态判断。如果没有配置 validateStatus 以及 validateStatus 函数返回值为 true 的时候，都认为是合法的，正常 resolve(response) ，否则创建一个错误。

编写测试 DEMO

examples/more/app.ts ：

axios
  .get('/more/304')
  .then(res => {
    console.log(res)
  })
  .catch((e: AxiosError) => {
    console.log(e.message)
  })

axios
  .get('/more/304', {
    validateStatus(status) {
      return status >= 200 && status < 400
    }
  })
  .then(res => {
    console.log(res)
  })
  .catch((e: AxiosError) => {
    console.log(e.message)
  })

examples/server.js ：

router.get('/more/304', function(req,res){
  res.status(304)
  res.end
})

接口返回 304 状态码。对于默认的请求会输出一条错误信息。在配置了自定义合法状态码的规则后，成功响应状态码的区间在 200 ~ 400 之间，这样不会报错，可以正常输出响应对象。