位置: IT常识 - 正文
如何使用 Axios 中的请求拦截器 和响应拦截器(如何使用axios直接发送GET请求)
编辑：rootadmin推荐整理分享如何使用 Axios 中的请求拦截器 和响应拦截器(如何使用axios直接发送GET请求)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:如何使用axios调用的方法,如何使用axios处理前端过于频繁的请求,如何使用axios进行数据请求,如何使用axios调用的方法,如何使用axios,如何使用axios处理前端过于频繁的请求,如何使用axios进行数据请求,如何使用axios进行数据请求,内容如对您有帮助，希望把文章链接给更多的朋友！
Axios 是一个常用的 JavaScript 库，用于发送 HTTP 请求和处理响应。在网站设计中，我们可以使用 Axios 请求拦截器和响应拦截器来实现一些常见的需求，例如添加认证信息、处理错误信息等。以下是一个简单的例子：
import axios from 'axios';// 创建一个 Axios 实例const instance = axios.create({baseURL: 'https://xxx.example.com',timeout: 5000,});// 添加请求拦截器instance.interceptors.request.use(function(config) {// 在请求发送之前做一些自定义操作config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');return config;},function(error) {// 对请求错误做些什么return Promise.reject(error);});// 添加响应拦截器instance.interceptors.response.use(function(response) {// 对响应数据做些什么return response.data;},function(error) {// 对响应错误做些什么if (error.response.status === 401) {// 处理认证错误}return Promise.reject(error);});// 发送 GET 请求instance.get('/data').then(function(response) {console.log(response);});在这个例子中，我们首先创建了一个 Axios 实例，并使用 create 方法来指定一些默认配置，例如基础 URL 和超时时间。然后，我们添加了一个请求拦截器和一个响应拦截器。
请求拦截器通过 use 方法来添加，其中
第一个函数在请求发送之前执行，可以在这里修改请求配置；
第二个函数在请求错误时执行。
响应拦截器也是通过 use 方法来添加，其中
第一个函数在接收到响应后执行，可以在这里处理响应数据；
第二个函数在接收到响应错误时执行，可以在这里处理错误信息。
最后，我们通过实例来发送 GET 请求，并在 then 方法中处理响应数据。
需要注意的是，Axios 的拦截器是链式调用的，每个拦截器都必须返回一个配置对象或一个 Promise。请求拦截器可以修改请求配置，并通过 return config 将其返回。响应拦截器可以处理响应数据，并通过 return response.data 将处理后的数据返回。如果出现错误，可以通过 return Promise.reject(error) 将错误信息返回，使得后续的 catch 方法能够捕获到错误。
上一篇：【无标题】(无标题节啥意思)
下一篇：大二学生web期末大作业 在线电影网站 HTML+CSS+JS(大二期末要考试吗)
