东方财富量化交易接口价格-Nuxt axios拦截器的配置和API 封装 axios api接口统一管理

首先下载axiosnpm包

然后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
    |---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);
  }
});

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

在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);

};

页面中

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

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

文章为作者独立观点，不代表股票交易接口观点