Axios
- Axios是用于网络请求的，个人认为比Ajax要好用的多
如何请求数据
2021-04-19_153520.png
-
第一种
- 上面这种方法默认使用get方法请求数据，但是可以通过method属性来修改默认请求方式
- 如果调用成功ES6语法默认调用resolve函数，执行then方法,反则如果失败则调用reject执行catch方法
-
url如果有参数的话可以直接写在url中或者通过params自动加到Url后面
2021-04-19_152046.png
-
第二种
- 上面这种方法则可以定义请求数据方法，请求的url如果有参数的话可以直接把参数写后面传进去】
同时进行两个网络请求
2021-04-19_160701.png
- 对于两个请求全部通过才执行下面操作的需求可以用axios.all进行。在里面传一个数组后，进行请求数据操作，两个都成功后会自动图片中的位置调用then方法
- 请求完成数据后返回的是一个数组，使用axios.spread可将[res1,res2]展开为res1,res2
公共配置
2021-04-19_232752.png
- 通过上图中的方式可便可进行公共配置，如上图便是配置了baseURL和timeout，配置之后的公共配置不用写也会在axios异步操作中有默认值。
- baseURL: 根路径的意思，接口地址的网址不包含路径
- url： 路径的意思，如果添加了baseURL属性则会默认加在baseURL后面
- timeout: 超时，
局部配置
2021-04-20_094739.png
- 上图中的配置即为通过创建axios实例的方法进行局部配置，在instance常量中是设置了三个属性，当然这个取决于自己设置了哪些，下面instance({})便是使用了局部配置
- 如果baseURL数据又不一样可以再创建一个跟上图一样的instance常量，这样每一个实例都要独立的配置，想用这个实例的配置直接用实例名({})即可
网络请求模块封装
-
模块一般都是封装在一个network文件夹中的request.js文件里
2021-04-20_111150.png -
模块封装是为了提高开发效率，使代码看起来更加简洁。封装代码如下
2021-04-20_111428.png -
上面代码是模板代码，导出了一个局部配置模板。如果有多个不一样的配置可直接粘贴复制多个export
2021-04-20_111844.png 上面则是使用时的代码。花括号中可以设置多个没有配置过的属性，然后在then执行成功处理，catch中执行失败处理
axios拦截器
拦截器是为了在发起网络请求等待期间能够做一些事情，顾名思义，拦截器会把请求拦截下来
-
拦截器的用处:
- 如果config中的一些信息不符合服务器要求，则可以进行修改
- 每次发起网络请求时，想在界面中显示一个请求的图标
-
某些网络请求需要一些特殊的信息（是否登录身份验证）
2021-04-20_162614.png
-
常规拦截使用: 上图中,instance是网络请求方法，request是常规拦截，.use中要求第一个传成功的执行的方法，并且传进去了一个config参数(此网络请求的配置),第二个传成功执行的方法，也传进去了一个叫err的报错信息参数。注意:操作之后1一定要把config返回出去代码才能正常请求
2021-04-20_163648.png 响应拦截使用： 与常规拦截不同的是，要用response方法进行拦截，并且拦截不光会返回配置，还会返回请求的数据，所以操作可以只把数据返回出去，如上图
