首先下载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技术博客