这样子一个简单的axios拦截器配置完成,下面统一封装api
|--api
|---index.js // api模块入口文件
|---apilist
|---home.js // 各个api接口
|---article.js
然后plugins下创建request.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);
}
});
使用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);
};
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);
}
在plugins->request.js
api封装参考Nuxt的API封装及解耦|Mrcdh技术博客
文章为作者独立观点,不代表股票交易接口观点