Nuxt中Axios拦截器的配置
首先你的项目中必须有axios的包,一般在创建项目的时候都会选择一起安装上,但是不排除有的小伙伴创建项目时没有安装,如果没有安装的,用以下命令安装
npm install axios --save-dev
安装不成功,可以切换淘宝镜像(cnpm),安装成功后在nuxt.config.js中加入以下代码进行配置
modules: [ '@nuxtjs/axios', ]
配置完modules后,需要在配置axios的baseurl,
import axios from 'axios' const instance = axios.create({baseURL:'默认地址'}); // 添加请求拦截器 instance .interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); // 添加响应拦截器 instance .interceptors.response.use(function (response) { // 对响应数据做点什么 return response; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); }); export default instance
我们可以在请求拦截器中添加发送请求前的操作,例如在header中加入token请求,可以在相应拦截器中做请求后的操作,例如整理数据格式、进行错误处理等,我们并把instance给暴露出来。
通过上面的步骤我们的拦截器就配置好了,接下来要回到nuxt.config.js中进行全局配置
plugins: [ '~/plugins/axios', ],
在以后的请求操作中使用 instance.get或instance.post就可以直接请求数据并做Axios中配置好的操作。