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

Nuxt中Axios拦截的配置

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

首先你的项目中必须有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中配置好的操作。

vue   nuxt   Axios   Axios拦截  

猜你喜欢