axios 用法分析

lxf2024-04-04 03:23:16

  request 库使用了 axios 的手动实例化方法 create 来封装请求,要理解其中的用法,我们需要首先学习 axios 库的用法

  我们先从一个普通的 axios 示例开始:

  上述代码可以改为:

  如果我们在请求时需要在 http header 中添加一个 token,需要将代码修改为:

  如果要捕获服务端抛出的异常,即返回非 200 请求,需要将代码修改为:

  这样改动可以实现我们的需求,但是有两个问题:

  下面我们使用 axios.create 对整个请求进行重构:

  首先我们通过 生成一个函数,该函数是 axios 实例,通过执行该方法完成请求,它与直接调用 区别如下:

  上述代码完成了基本请求的功能,下面我们需要为 http 请求的 headers 中添加 token,同时进行白名单校验,如 不需要添加 token,并实现异步捕获和自定义处理:

  这里核心是调用了 方法,即 axios 的请求拦截器,该方法需要传入两个参数,第一个参数是拦截器方法,包含一个 config 参数,我们可以在这个方法中修改 config 并且进行回传,第二个参数是异常处理方法,我们可以使用 将异常返回给用户进行处理,所以我们在 request 请求后可以通过 catch 捕获异常进行自定义处理

  下面我们进一步增强

  axios 功能,我们在实际开发中除了需要保障 http statusCode 为 200,还需要保证业务代码正确,上述案例中,我定义了

  error_code 为 0 时,表示业务返回正常,如果返回值不为 0 则说明业务处理出错,此时我们通过 方法定义响应拦截器,它仍然需要2个参数,与请求拦截器类似,注意第二个参数主要处理 statusCode 非 200 的异常请求,源码如下: