如何二次封装axios?

一、在学习二次封装axios之前要先了解axios实例和axios拦截器

 1、为什么要使用实例或者全局配置呢?

    就相当于我们将请求相同的部分都放在实例属性中,当实例发起不同请求时,每一条请求都可以获得共享部分的属性,只需要填写不同的地方,使得代码更加的简写、明了

2、创建axios实例

  • baseURL:提供基础路径(在发起请求时我们只需要)
  • timeout:请求5s还没有成功,则中断请求
  • headers:设置请求头
  • axios返回的是一个promise对象所以可以运用.then的方法进行回调

 3、全局配置axios默认配置项

二、拦截器

请求拦截器

为什么要是设置请求拦截器?(当我们判断请求地址是否为登录,不是登录时,我们将它拦截下来给请求头加上token值,这样我们就不用在每次请求都加一次token)

响应拦截器

为什么要设置响应拦截器?因为axios请求返回的是axios的响应,包含其他内容我们将他拦截下来,筛选出想要的数据

axios响应返回的数据:

拦截之后的数据:

 

三、如何二次封装axios?

1、封装的步骤:

 2、request.js例子

 3、模拟请求

 步骤:

 

猜你喜欢

转载自blog.csdn.net/qq_48109675/article/details/127184975