赞
踩
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 方法能够捕获到错误。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。