。

所以#xff0c;axios允许我们进行创建axios实例、ax…

axios实例

axios不仅仅是简单的用基础请求用法的形式向服务器请求数据一旦请求的端口与次数变多之后简单的请求用法会有些许麻烦。

所以axios允许我们进行创建axios实例、axios配置、拦截器、取消请求等操作。

axios实例

后端接口有很多每个接口中可以获得数据有所不同我们可以使用不同的axios实例向不同的接口发送请求。

创建axios实例时可以为其设置请求配置使用该实例发送的请求都i会有相同的部分配置。

其配置细节在下面的axios配置中。

//使用axios.create创建一个axios实例const

instance

axios.create({//设置baseURL,它会自动添加在发送请求时的url前面//使用实例发送请求时便不用书写很长的urlbaseURL:

http://localhost:3000/,//设置超时时间,如果请求未在该时间范围内完成则请求失败//此处的时间单位是mstimeout:

3000});

axios配置是发送请求时的可选项只有url是必须的method默认是GET方法。

axios配置通常与axios实例结合使用直接在axios实例中添加配置对在一个接口的所有请求设置“要求”。

1、baseURL使用实例发送请求时baseURL会自动添加在请求的url前面除非url时绝对路径。

3、params请求参数会与请求一起发送给服务器服务器通过参数查找数据并返回。

4、data请求体包含需要发送的数据仅适用于POST.PUT.PATCH.DELETE方法。

5、timeout超时时长单位是毫秒(ms)如果请求超过timeout的值则请求会中断

以上是axios常用的请求配置想要了解更多请参考axios请求配置

拦截器

拦截器可以让你在请求发送到服务器之前或响应从服务器返回之后对请求或响应进行预处理或后处理。

这在实现诸如日志记录、身份验证、错误处理、数据转换或重试逻辑等方面特别有用。

请求拦截器

请求拦截器故名思意便是对请求进行拦截在请求发送到服务器之前进行自定义操作如身份验证、数据转换等。

设置请求拦截器并设置自定义操作

//设置请求拦截器此处的config参数代表请求配置axios.interceptors.request.use((config)

{//在发送请求之前在控制台上输出console.log(请求拦截器

成功);return

//一定要将拦截的config返回。

否则无法进行数据请求},(err)

失败);return

响应拦截器故名思意便是对服务器的响应进行拦截在响应返回之前进行自定义操作。

设置响应拦截器并设置自定义操作

//设置响应拦截器,此处的res代表服务器返回的数据对象axios.interceptors.response.use((res)

{//状态码在

axios.get(http://localhost:3000/post).then((res)

{console.log(res);console.log(数据请求成功);}).catch((err)

{console.log(err);})

axios.CancelToken.source();axios.get(http://localhost:3000/post,{cancelToken:

{console.log(res);});//取消请求sourse.cancel(请求已取消);