首页 / 大前端 / Nuxt中Axios拦截器的配置

Nuxt中Axios拦截器的配置

2020-12-26 12:26 大前端 阅读 4118 来源

首先你的项目中必须有axios的包，一般在创建项目的时候都会选择一起安装上，但是不排除有的小伙伴创建项目时没有安装，如果没有安装的，用以下命令安装

npm install axios --save-dev

安装不成功，可以切换淘宝镜像(cnpm)，安装成功后在nuxt.config.js中加入以下代码进行配置

modules: [
      '@nuxtjs/axios',
 ]

配置完modules后，需要在配置axios的baseurl，

import axios from 'axios'
const instance = axios.create({baseURL:'默认地址'});

// 添加请求拦截器
instance .interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
instance .interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

export default instance

我们可以在请求拦截器中添加发送请求前的操作，例如在header中加入token请求，可以在相应拦截器中做请求后的操作，例如整理数据格式、进行错误处理等，我们并把instance给暴露出来。

通过上面的步骤我们的拦截器就配置好了，接下来要回到nuxt.config.js中进行全局配置

plugins: [
      '~/plugins/axios',
  ],

在以后的请求操作中使用 instance.get或instance.post就可以直接请求数据并做Axios中配置好的操作。

赞同319
vue   nuxt   Axios   Axios拦截器  

猜你喜欢