网络请求库 --- axios库

原生的请求：XMLHttpRequest和fetch

原生缺点：

 

目录：

1、认识Axios库

2、axios发送请求

3、axios创建实例

4、axios的拦截器

5、axios请求封装

一、认识Axios库

 

 

二、axios发送请求

 

 

 1、发送请求：

 

 （1）没有参数的请求，可以是get、post方式

 （2）发送get请求：

参数可以直接在url后面以 ?xxxxx=xxx 的形式发送axios请求：（主要是发送字符串什么的）

参数以对象格式发送axios：

  

（3）发送post请求：

post请求的参数不能直接接在url后面的。

 

 或者

 

2、baseurl的使用：

默认配置了地址，在之后的请求url里面只需要写默认地址之后的内容就可以。

 

3、多个发送地址都有返回时才执行then：

 

三、axios创建实例

1、配置不同的实例可以使用不同的配置，比如配置不同的baseURL等等。

 

2、如果直接使用axios来配置的话会影响到全局的axios。

 3、运用实例来发送请求：

 

 

四、axios的拦截器

 1、请求拦截

 

 

 

2、响应拦截

 

 上图的响应拦截，服务器发送数据给我们的时候，以res.data的形式来获取数据了，后续我们用实例拿数据的时候就不用再写res.data了：

 

 

 

五、axios请求封装

 

我们普通的使用axios会出现在很多的组件里面，如果哪一天这个库不维护了或者项目不使用这个库了，我们就得使用其他的库，把原来使用的axios修改成新的库，但是那么多组件都使用的axios的库，我们修改的成本很高。于是我们使用封装，每个组件都使用这个封装的文件，以后只需要修改这个封装文件就能修改多个组件的请求。

1、创建文件

2、输入代码：

（1）没有使用配置的写法（无baseURL）：

 

 组件中使用的封装的类：

 

 

 

（2）有使用配置的写法（有baseURL）：

创建了新的实例instance来配置，直接用axios来配置的话有影响。

  组件中使用的封装的类：

 

 

封装可参考其他作者的内容：

在项目中用ts封装axios，一次封装整个团队受益😁 - 掘金 (juejin.cn)https://juejin.cn/post/7071518211392405541