nuxt配置axios模块

前端开发
2021年01月02日
511

配置本地代理

nuxt在cli中配置时可以选择添加axios模块,如果当时没有选择的话,可以手动来添加。

shell
npm i -S axios

然后在nuxt.config.js里面作如下配置

js
// nuxt.config.js export default { axios: { proxy: true }, proxy: { '/api': { target: '[接口地址]', changeOrigin: true } } };

axios 请求与响应拦截

在plugins目录中添加axios.js文件

js
// plugins/axios.js import * as axios from 'axios'; export default function ({ app: { $axios } }) { $axios.all = axios.all; $axios.spread = axios.spread; // 请求拦截 $axios.onRequest((config) => { // 这里写请求拦截配置 return config; }); // 响应拦截 $axios.onResponse((response) => { // 这是城写响应拦截配置 return response.data; }); // 请求失败处理 $axios.onError((error) => { // ... return Promise.resolve(error.response); }); };

然后在nuxt.config.js里面作如下配置即可

js
// nuxt.config.js export default { plugins: [ '~/plugins/axios' ] };