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 方法能够捕获到错误。