Nuxt axios拦截器的配置和API 封装（axios，api接口统一管理）

首先下载axios npm包

npm install @nuxtjs/axios

然后plugins下创建request.js

request.js配置如下 

import { Message } from 'element-ui'
import apis from '@/api/index'

export default (ctx, inject) => {
  ctx.$axios.defaults.baseURL = "/requestApi"
  ctx.$axios.defaults.timeout = 15000,// 超时时间 单位是ms

    ctx.$axios.onRequest(config => {
      config.headers['Authorization'] = "Bearer " + 'c6f0cfcd-cdaf-4a7a-9ee0-c85c128a8962';
      // console.log("请求拦截器")
      if (process.client) {
        // 用户端
      }

      if (process.server) {
        // 服务端
      }
      return config
    })

  ctx.$axios.onResponse(response => {
    // console.log('响应拦截器：', response)
    if (response.data.code === 1) {
      Message({
        message: response.data.msg,
        type: 'error',
        duration: 5 * 1000
      });
      return Promise.reject('error')
    } else {
      return response.data;
    }
  })

  ctx.$axios.onError(error => {
    // console.log('响应异常')
    const code = parseInt(error.response && error.response.status);
    // switch (code) 分情况处理
    if (code === 401) {
      Message({
        message: ' 您的登录信息已失效，请重新登录后访问。',
        type: 'error',
        duration: 5 * 1000
      });
      setTimeout(() => {
        ctx.redirect({ path: '/login' })
      }, 2000)

    } else {
      Message({
        message: '500服务器错误',
        type: 'error',
        duration: 5 * 1000
      });
    }
  })

  var apiObject = {};
  for (var i in apis) {
    apiObject[i] = apis[i](ctx.$axios);
  }
  //文档: https://www.nuxtjs.cn/guide/plugins
  //inject:注入到服务端context, vue实例, vuex中
  inject("api", apiObject);
}

 这样子一个简单的axios拦截器配置完成，下面统一封装api

根目录创一个api，创建api模块

|--api
    |---index.js       // api模块入口文件
    |---apilist
    	|---home.js    // 各个api接口
    	|---article.js

api/index.js用于导入apilist中的所有接口,此时api/index模块导出为一个object, 参数为apilist中每个文件名,value值为对应的函数

// api/index.js
const modulesFiles = require.context("./apilist", true, /\.js$/);
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1");

  const value = modulesFiles(modulePath);

  modules[moduleName] = value.default || value;

  return modules;
}, {});

export default modules;

//home.js 传入的axios参数调用
export default axios => ({
  list(data) {
    return axios.post(`/api/home/list`, data);
  }
});

在plugins->request.js （上面已经填写好了）

使用plugin中inject参数暴露api ,api注入到服务端context, vue实例, vuex中。

//plugins/api-plugin.js

import apis from "@/api/index";
export default (ctx, inject) => {

  var apiObject = {};
  for (var i in apis) {
    apiObject[i] = apis[i](ctx.$axios);
  }
 
  //文档: https://www.nuxtjs.cn/guide/plugins
  //inject:注入到服务端context, vue实例, vuex中
  inject("api", apiObject);

};

 

配置nuxt.config.js

plugins: ["@/plugins/axios", "@/plugins/api-plugins"]

页面中

mounted(){
	this.$api.home.list({page: 99}).then(res=>{
		this.data=res.data
	})
}

 api封装参考Nuxt的API 封装及解耦 | Mrcdh技术博客