vue写一个axios的拦截器-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue写一个axios的拦截器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

要编写并生效Axios拦截器，可以按照以下步骤进行操作：

1.创建一个文件：在你的项目中，创建一个新的JavaScript文件，例如interceptors.js，用于编写拦截器代码。
2.导入所需的库和模块：在interceptors.js文件中，导入所需的Axios库和其他依赖项。

import axios from 'axios';

// 其他依赖项的导入

3.创建Axios实例：使用Axios库创建一个自定义的Axios实例，可以在创建实例时配置默认的请求参数。

const instance = axios.create({
  baseURL: 'https://api.example.com', // 设置基础URL
  timeout: 5000, // 设置请求超时时间
  // 其他配置参数...
});

4.添加请求拦截器：通过调用instance.interceptors.request.use()方法，添加一个请求拦截器。

// request拦截器
  instance.interceptors.request.use(config => {
    console.log("请求拦截器",config)
    // 从sessionStorage获取token
    const token = sessionStorage.getItem('usertoken');
    // 如果token存在，则在请求头中添加Authorization字段
    if (token) {
      config.headers.Authorization = token;
    }
    // get请求映射params参数
    if (config.method === 'get' && config.params) {
      let url = config.url + '?';
      for (const propName of Object.keys(config.params)) {
        const value = config.params[propName];
        var part = encodeURIComponent(propName) + "=";
        if (value !== null && typeof(value) !== "undefined") {
          if (typeof value === 'object') {
            for (const key of Object.keys(value)) {
              let params = propName + '[' + key + ']';
              var subPart = encodeURIComponent(params) + "=";
              url += subPart + encodeURIComponent(value[key]) + "&";
            }
          } else {
            url += part + encodeURIComponent(value) + "&";
          }
        }
      }
      url = url.slice(0, -1);
      config.params = {};
      config.url = url;
    }
    return config
  }, error => {
      Promise.reject(error)
  })

  // 响应拦截器
  service.interceptors.response.use(res => {
        console.log('---响应拦截器---', res);
        if (res.data.code === 0 || res.status === 401) {
          // 返回登录页面
          window.top.location.href = '/front/page/login.html';
        } else {
          return res.data;
        }
      },
    error => {
      let { message } = error;
      if (message == "Network Error") {
        message = "后端接口连接异常";
      }
      // 状态码报错属于error不是响应拦截器能够使用的
      else if (error.response && error.response.status === 401) {
        // 返回登录页面
        window.top.location.href = '/front/page/login.html';
      }
      else if (message.includes("timeout")) {
        message = "系统接口请求超时";
      }
      else if (message.includes("Request failed with status code")) {
        message = "系统接口" + message.substr(message.length - 3) + "异常";
      }
      window.vant.Notify({
        message: message,
        type: 'warning',
        duration: 5 * 1000
      })
      //window.top.location.href = '/front/page/no-wify.html'
      return Promise.reject(error)
    })

5.添加响应拦截器：通过调用instance.interceptors.response.use()方法，添加一个响应拦截器。

instance.interceptors.response.use(response =&gt; {
  // 对响应数据做些什么
  // 例如处理错误状态码、解析数据等
  return response.data;
}, error =&gt; {
  // 对响应错误做些什么
  return Promise.reject(error);
});

6.导出Axios实例：在interceptors.js文件的末尾，导出包含拦截器的Axios实例。

export default instance;

7.在需要使用拦截器的文件中导入并使用：在你的其他文件中（例如主应用程序文件或用于发起请求的地方），导入包含拦截器的Axios实例，并使用它进行网络请求。

import axiosInstance from './interceptors';

axiosInstance.get('/api/example')
  .then(response =&gt; {
    // 处理成功的响应
  })
  .catch(error =&gt; {
    // 处理错误的响应
  });

通过以上步骤，你将能够创建自定义的Axios拦截器并使其生效。你需要创建一个叫做interceptors.js的文件，其中包括创建Axios实例、添加请求和响应拦截器的代码，并将Axios实例导出。然后，在需要使用拦截器的文件中导入interceptors.js文件，并使用导入的Axios实例进行请求操作。这样，拦截器将在请求发送和响应返回时生效，并执行预定义的逻辑。

演示流程

当然！下面是一个简单的Axios拦截器的示例：
import axios from ‘axios’;

// 创建一个axios实例
const instance = axios.create({
  baseURL: 'https://api.example.com', // 设置基础URL
  timeout: 5000, // 设置请求超时时间
});

// 请求拦截器
instance.interceptors.request.use(config =&gt; {
  // 在发送请求之前做些什么
  // 例如添加认证头部信息、设置loading状态等
  console.log('请求拦截器');

  // 必须有返回config，不然请求无法发送
  return config;
}, error =&gt; {
  // 对请求错误做些什么
  console.error('请求拦截器错误', error);
  return Promise.reject(error);
});

// 响应拦截器
instance.interceptors.response.use(response =&gt; {
  // 对响应数据做些什么
  // 例如处理错误状态码、解析数据等
  console.log('响应拦截器');

  // 必须有返回response，不然无法在then里接收到响应
  return response;
}, error =&gt; {
  // 对响应错误做些什么
  console.error('响应拦截器错误', error);
  return Promise.reject(error);
});

export default instance;

以上代码创建了一个具有请求拦截器和响应拦截器的Axios实例。在请求拦截器中，可以添加一些共同的请求处理逻辑，例如添加认证头部信息或设置loading状态。在响应拦截器中，可以处理响应数据，例如解析数据或处理错误状态码。你可以根据需要，在拦截器中添加更多的逻辑和自定义处理。
你可以将以上代码保存为一个文件（例如interceptors.js），然后在需要使用Axios的地方导入该文件，例如：

import axiosInstance from './interceptors';

axiosInstance.get('/api/example')
  .then(response =&gt; {
    // 处理成功的响应
  })
  .catch(error =&gt; {
    // 处理错误的响应
  });