NuxtJS中进行axios拦截器的配置和API封装
下载安装：axios npm包
1
| npm install @nuxtjs/axios --save
|
一、配置拦截器
在根目录plugins文件夹下创建axios.js
axios.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
| import { Message } from 'element-ui'
import cookie from 'js-cookie'
import apis from "@/api/index";
export default function({ $axios, redirect }, inject) {
$axios.onRequest((config) => {
let userInfo = cookie.get('userInfo')
if (userInfo) {
userInfo = JSON.parse(userInfo)
config.headers['token'] = userInfo.token
}
console.log('Making request to ' + config.url)
})
$axios.onRequestError((error) => {
console.log('onRequestError', error)
})
$axios.onResponse((response) => {
console.log('Reciving resposne', response)
if (response.data.code === 0) {
return response
} else if (response.data.code === -211) {
console.log('用户校验失败')
cookie.set('userInfo', '')
window.location.href = '/'
} else {
Message({
message: response.data.message,
type: 'error',
duration: 5 * 1000,
})
return Promise.reject(response)
}
})
$axios.onResponseError((error) => {
console.log('onResponseError', error)
})
var apiObject = {};
for (var i in apis) {
apiObject[i] = apis[i]($axios);
}
inject("api", apiObject);
}
|
配置nuxt.config.js
1
2
3
4
5
6
7
8
9
10
11
| module.exports = {
axios: {
baseURL: 'http://localhost:10010',
},
plugins: [
'~/plugins/axios',
'~/plugins/element-ui.js',
]
}
|
二、统一封装api
2.1 如何封装？
根目录创建一个api目录，目录结构如下：
1
2
3
4
5
| |--api
|---index.js // api模块入口文件
|---api-list
|---home.js // 各个api接口
|---article.js
|
api/index.js用于导入api-list中的所有接口,此时api/index模块导出为一个object, 参数为api-list中每个文件名,value值为对应的函数。
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
|
const modulesFiles = require.context("./api-list", 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参数是在plugins插件配置中传入的。
1
2
3
4
5
6
|
export default axios => ({
list(data) {
return axios.post(`/api/home/list`, data);
}
});
|
2.2 配置nuxt.config.js
如下配置已经在一、配置拦截器中配置过，不需要重复配置，如未在配置拦截器实现如下代码，请配置如下：
创建文件api-plugin.js
使用plugin中inject参数暴露api ,api注入到服务端context, vue实例, vuex中。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
import apis from "@/api/index";
export default (ctx, inject) => {
var apiObject = {};
for (var i in apis) {
apiObject[i] = apis[i](ctx.$axios);
}
inject("api", apiObject);
};
|
nuxt.config.js
1
| plugins: ["@/plugins/api-plugins"]
|
三、页面中使用
1
2
3
4
5
6
7
8
9
10
11
| <template>
</template>
<script>
export default {
created(){
this.$api.home.list( {page: 10} ).then(res => {
this.data=res.data
})
}
}
</script>
|