NuxtJs Axios 的使用

自定义接口目录并配置全局 $request

1、项目目录新建 requests目录，新建接口文件 requests/default.js，如下：

export  default ($axios) => ({

 /**

   * 默认 markdown

* @returns  {*}

   */

 md() {

 $axios.defaults.baseURL = process.env.APP_URL

 return  $axios.get('/md.md')

  }

})

2、项目目录新建 utils目录，新建工具文件 utils/request.js

const  modulesFiles = require.context("../requests", 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

3、项目目录新建 plugins目录，新建 Nuxt 插件文件 plugins/request.js

import  request  from  '@/utils/request'

export  default (ctx, inject) => {

 let  apiObject = {};

 for (let  i  in  request) {

 apiObject[i] = request[i](ctx.$axios);

  }

 //文档: https://www.nuxtjs.cn/guide/plugins

 //inject:注入到服务端context, vue实例, vuex中

 inject("request", apiObject);

};

4、nuxt.config.js中 plugins中引入插件

plugins: [

  ...

 '@/plugins/request'

],

5、使用

async  asyncData(context) {

 let  self = context.app

 await  self.$request.default.md().then(res  => {

 return {

 MD:  res.data

    }

  })

},

methods: {

 async  getMD() {

 this.$request.default.md().then(res  => {

 console.log(res.data)

    })

  },

}

Axios 拦截器配置

推荐使用 cookie-universal-nuxt这个包：

使用方法

1、安装 cookie-universal-nuxt

$ npm i cookie-universal-nuxt

2、 nuxt.config.js 加载插件

// Modules: https://go.nuxtjs.dev/config-modules

  modules: [

    ...

 'cookie-universal-nuxt'

  ],

配置好后会将 $cookies 注入到了 nuxt 全局

3、 新建 Nuxt 插件文件 plugins/axios.js

import {message} from  "ant-design-vue";

/**

 * axios 全局拦截器

 *

* @param  $axios

* @param  $request  @see  '@/utils/request.js'

* @param  $cookies  @form 'cookie-universal-nuxt'

 */

export  default  function ({ $axios, $request, $cookies }) {

 /**

   * 请求前

   */

 $axios.onRequest(config  => {

 config.headers['Authorization'] = $cookies.get("Authorization")

  })

 /**

   * 请求失败

   */

 $axios.onError(async  error  => {

 const  code = parseInt(error.response && error.response.status)

 const  messageText = (error.response.data && error.response.data.message) ? error.response.data.message : "服务异常，请联系管理员！";

 switch (code) {

 case  401:

 const  errorCode = parseInt(error.response.data.code)

 switch (errorCode) {

 // 刷新token 失败

 case  20002:

 // 删除 用户信息

 $cookies.remove('Authorization')

 message.warning(messageText)

 break

 // 登录信息过期

 case  20001:

 // 刷新 token

 await  $request.user.refresh().then(res  => {

 $cookies.set('Authorization', 'Bearer ' + res.data.data.access_token, {

 path:  '/',

 maxAge:  60 * 60 * 24 * 7

              })

            })

 // 重新执行上次方法

 return  $axios.request(error.response.config)

        }

 break

 case  422:

 message.warning(messageText)

 return  // 返回空数据

 default:

 message.error(messageText)

 break

    }

 return  Promise.reject(error)

  })

}

4、nuxt.config.js 中加载插件

plugins: [

  ...

 '@/plugins/axios'

],

5、如如上配置好后，页面登录的时候将服务端获取到的 token 存入 $cookies 中（需要使用 this.$cookies 方法）

methods: {

  /**

   * 登录

   */

async login() {

 let res = await this.$request.user.login(this.form)

 if (!res) {

 return

    }

    this.$cookies.set('Authorization', 'Bearer ' + res.data.data.access_token, {

path: '/',

      maxAge: 60 * 60 * 24 * 7

    })

  }

}

本作品采用《CC 协议》，转载必须注明作者和本文链接