Axios进阶
目录
axios实例
axios请求配置
拦截器
请求拦截器
响应拦截器
取消请求
axios不仅仅是简单的用基础请求用法的形式向服务器请求数据，一旦请求的端口与次数变多之后，简单的请求用法会有些许麻烦。所以，axios允许我们进行创建axios实例、axios配置、拦截器、取消请求等操作。
axios实例
后端接口有很多，每个接口中可以获得数据有所不同，我们可以使用不同的axios实例向不同的接口发送请求。
创建axios实例时可以为其设置请求配置，使用该实例发送的请求都i会有相同的部分配置。其配置细节在下面的axios配置中。
axios实例是通过axios.create创建的：
//使用axios.create创建一个axios实例const instance = axios.create({//设置baseURL,它会自动添加在发送请求时的url前面//使用实例发送请求时便不用书写很长的urlbaseURL: "http://localhost:3000/",//设置超时时间,如果请求未在该时间范围内完成，则请求失败//此处的时间单位是mstimeout: 3000});使用axios实例：
instance.get('post').then((res) => {console.log(res);}) 
axios请求配置
axios配置是发送请求时的可选项，只有url是必须的，method默认是GET方法。axios配置通常与axios实例结合使用，直接在axios实例中添加配置，对在一个接口的所有请求设置“要求”。
1、baseURL：使用实例发送请求时，baseURL会自动添加在请求的url前面，除非url时绝对路径。
2、headers：自定义请求头。
3、params：请求参数，会与请求一起发送给服务器，服务器通过参数查找数据并返回。
4、data：请求体，包含需要发送的数据，仅适用于"POST"."PUT"."PATCH"."DELETE"方法。
5、timeout：超时时长，单位是毫秒(ms)，如果请求超过"timeout"的值，则请求会中断
以上是axios常用的请求配置，想要了解更多，请参考axios请求配置
拦截器
拦截器可以让你在请求发送到服务器之前或响应从服务器返回之后，对请求或响应进行预处理或后处理。这在实现诸如日志记录、身份验证、错误处理、数据转换或重试逻辑等方面特别有用。
axios的拦截分为请求拦截器和响应拦截器。
请求拦截器
请求拦截器故名思意便是对请求进行拦截，在请求发送到服务器之前进行自定义操作，如身份验证、数据转换等。
设置请求拦截器并设置自定义操作：
//设置请求拦截器，此处的config参数代表请求配置axios.interceptors.request.use((config) => {//在发送请求之前在控制台上输出console.log("请求拦截器 成功");return config; //一定要将拦截的config返回。否则无法进行数据请求},(err) => {//请求错误之后console.log("请求拦截器 失败");return Promise.reject(err); //请求错误时的逻辑处理});响应拦截器
响应拦截器故名思意便是对服务器的响应进行拦截，在响应返回之前进行自定义操作。
设置响应拦截器并设置自定义操作：
//设置响应拦截器,此处的res代表服务器返回的数据对象axios.interceptors.response.use((res) => {//状态码在 2xx 范围内触发console.log("响应拦截器 成功");//对响应数据的自定义操作return res.data; //只返回res的data},(err) => {//状态码超出 2xx 范围触发console.log("响应拦截器 失败");//对响应错误的处理return Promise.reject(err);});对服务器发送请求：
axios.get('http://localhost:3000/post').then((res) => {console.log(res);console.log("数据请求成功");}).catch((err) => {console.log(err);})结果：
取消请求
取消请求用于取消正在进行的请求。
由于取消请求我们不常用，所以了解即可。
const sourse = axios.CancelToken.source();axios.get('http://localhost:3000/post',{cancelToken: sourse.token}).then((res) => {console.log(res);});//取消请求sourse.cancel("请求已取消");