axios拦截器的使用？

Axios 拦截器是一种强大的功能，允许你在请求被发送到服务器之前，或者服务器响应被送到应用之前，对其进行“拦截”和修改。这在你需要统一处理请求和响应，或者在请求发送前添加一些公共信息（如认证令牌）时非常有用。

Axios 提供了两种类型的拦截器：请求拦截器和响应拦截器。

请求拦截器

请求拦截器会在请求被发送到服务器之前被调用。你可以在这里修改请求的配置，例如添加请求头、设置超时时间等。

下面是一个使用请求拦截器的示例：

axios.interceptors.request.use(function (config) {  
    // 在发送请求之前做些什么  
    // 例如，添加请求头  
    config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');  
    return config;  
  }, function (error) {  
    // 对请求错误做些什么  
    return Promise.reject(error);  
  });

在这个例子中，我们为所有请求添加了一个名为 Authorization 的请求头，其值为从 localStorage 中获取的 token。如果请求出现错误，我们直接返回一个被拒绝的 Promise。

响应拦截器

响应拦截器会在服务器响应被送到应用之前被调用。你可以在这里对响应数据进行一些处理，或者在响应错误时执行一些操作。

下面是一个使用响应拦截器的示例：

axios.interceptors.response.use(function (response) {  
    // 对响应数据做点什么  
    // 例如，如果服务器返回的状态码为 200，则直接返回响应数据  
    if (response.status === 200) {  
      return response.data;  
    } else {  
      // 如果状态码不是 200，则抛出错误  
      return Promise.reject(response.data);  
    }  
  }, function (error) {  
    // 对响应错误做点什么  
    if (error.response.status) {  
      // 如果服务器返回了状态码，则根据状态码处理错误  
      switch (error.response.status) {  
        case 401:  
          // 未授权，跳转到登录页面  
          router.push('/login');  
          break;  
        case 403:  
          // 禁止访问，提示用户  
          alert('你没有权限访问该页面');  
          break;  
        default:  
          // 其他错误，提示用户  
          alert('请求出错');  
      }  
      return Promise.reject(error.response);  
    }  
  });

在这个例子中，我们检查服务器返回的状态码。如果状态码为 200，我们直接返回响应数据；否则，我们返回一个被拒绝的 Promise，并在控制台中打印错误信息。如果服务器返回了错误的状态码（如 401 或 403），我们还执行了一些额外的操作，如跳转到登录页面或提示用户。