看这篇文章之前，默认你是知道nuxt是什么的，并且知道nuxt怎么使用。
如果不了解的，建议先去看看nuxt的基础知识再来继续阅读本篇文章
nuxt中文官网：https://zh.nuxtjs.org/
nuxt官方推荐使用axios作为http请求的类库。
axios在nuxt中有两种使用场景：
- 客户端使用
- 服务端使用
nuxt提供了专用的axios的模块：https://axios.nuxtjs.org/，并且支持反向代理等功能
当然你也可以不使用专用模块，以传统模式引入原生axios，这里不做讨论
首先在nuxt.config.js中引入axios模块，代码如下：
(如果需要反向代理等功能，需要引入@nuxtjs/proxy，不过不引入好像也可以用，默认自带的)
modules: [
// Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/axios',
'@nuxtjs/proxy'
]
然后再nuxt.config.js中做如下配置：
axios: {
prefix: '/api',
credentials: true,
proxy: true
},
proxy:
{
'/api': 'http://bugchang.com'
}
axios：
- prefix：前缀的值，比如请求
get articles/1实际请求是经过修饰的get api/articles/1 - credentials：是否携带证书，这个我没用到，也不知道具体咋用的，感兴趣的可以去研究一下
- proxy：是否开启代理，为
true时proxy中的配置才能生效
proxy：
- 将axios请求地址通过反向代理进行请求，如
get api/articles/1的最终请求会指向get http://bugchang.com/api/articles/1
这只是最简单的配置，porxy还有其他形式的配置：
proxy: {
'/api/': {
target: 'http://bugchang.com/',
pathRewrite: {
'^/api/': ''
}
}
},
- target：将api前缀的地址请求指向target定义的地址
- pathRewrite：将url中的api替换为空
举个例子，2个后台接口：
get articles/1get categories/1
这样的接口proxy没法做设置，因为没规律，不能每个接口都加一条规则吧，所以用axios先给地址加个前缀，这样就变成了：
get api/articles/1get api/categories/1
然后我们只要指定/api/这样的Url都通过代理指向http://bugchang.com这个地址，请求的url就会变成：
get http://bugchang.com/api/articles/1get http://bugchang.com/api/categories/1
但是实际上我们后台的接口并没有api这个路径，这样访问肯定404，所以我们通过pathRewrite在请求时把/api/这个字符串替换成''：
get http://bugchang.com/articles/1get http://bugchang.com/categories/1
这样就达到了我们的目的。
axios配置
在nuxt.config.js中的axios代码块中我们可以对axios模块进行基础参数的配置，基本上和原生axios没两样
但是值得注意的一点是，我们用原生axios的时候西关定义baseURL，在nuxt中baseURL的定义需要关注一下，如果你使用了反向代理的功能（也就是proxy: true），那么就不能定义baseURL，这两项之间是冲突的，我们可以使用prefix来代替baseURL
还有一个参数是原生axios没有的，browserBaseURL，browserBaseURL是客户端的访问的根Url，因为在nuxt中，前端和后端访问的地址可能不一样，比如前端访问线上地址：http://blog.bugchang.com/，但是后台如果和接口服务在一个服务器上，可以直接访问http://localhost:5000，这样可以避免不必要的网络延迟和映射流量
browserBaseURL默认是baseURL的值，若果proxy: true那么默认值就是prefix的值
其他选项配置参考官方文档：https://axios.nuxtjs.org/options
axios的使用
async getCategories () {
this.categories = await this.$axios.$get('/categories')
}
按照以上的配置后，我们是可以在nuxt的上下文中拿到axios的对象，使用this.$axios获取到axios对象，然后进行get或post等请求即可
有三种方式来使用axios进行请求，无论使用哪种效果都是一样的（本人更偏爱第二种）：
- 返回 Promise
function test1(){
this.$axios.get(`http://blog.bugchang.com/articles/1`)
.then((res) => {
console.log(res)
})
}
- 使用 async或await
function test2(){
const { data } = await this.$axios.get(`http://blog.bugchang.com/articles/1`)
console.log(data)
}
- 使用 回调函数
function test3(callback){
this.$axios.get(`http://blog.bugchang.com/articles/1`)
.then((res) => {
callback(null, { title: res.data.title })
})
}
以上示例代码是在客户端模式下使用的，也就是no-ssr模式，那么服务器端如何使用呢？以nuxt的asyncData方法为例
了解nuxt的生命周期的话，们知道asyncData方法中是没有this对象的，我们可以把$axios作为参数传递到asyncData方法
代码如下：
async asyncData ({ params, $axios }) {
const { data } = await $axios.get(`/articles/index?pageIndex=1`)
return { data, page: 1 }
}
服务端如果需要同时请求多个接口怎么写呢，普通的写法是不生效的，要这么写：
async asyncData ({ params, $axios }) {
const [articles, category] = await Promise.all([
$axios.$get(`/articles/category/${params.id}`),
$axios.$get(`/categories/${params.id}`)
])
...
}
关于$axios.$get和$axios.get的坑
一开始我没注意到这块的问题，后来遇到了一些坑才发现是咋回事
$get直接返回responsebody的内容，其他相关信息比如header、cookie什么的上下文信息是不返回的
get与$get正相反，包括上下文信息和消息体在内的内容都会返回
const { data } = await $axios.get(`/articles/index?pageIndex=1\`)
const data = await $axios.$get(`/articles/index?pageIndex=1\`)
const data = await $axios.get(`/articles/index?pageIndex=1\`).data
以上三种写法返回的对象是一致的，注意{}的区别
自定义全局过滤器
如果以上配置无法满足你的要求，或者你要定义一些全局过滤器，做一些额外操作的话，可以以插件的形式加载
在plugins文件夹下新建axios.js，这些配置和原生的axios一样，不再赘述：
import Cookie from 'js-cookie'
export default function (app) {
const axios = app.$axios
// 基本配置
axios.defaults.timeout = 10000
axios.defaults.headers.post['Content-Type'] = 'application/json'
axios.defaults.headers.patch['Content-Type'] = 'application/json'
axios.defaults.headers.put['Content-Type'] = 'application/json'
// 请求回调
axios.onRequest((config) => {
const token = Cookie.get('token')
config.headers.Authorization = `Bearer ${token}`
})
// 返回回调
axios.onResponse((res) => {
if (res.headers.refreshtoken) {
Cookie.set('token', res.headers.refreshtoken)
}
})
// 错误回调
axios.onError((error) => {
switch (error.response.status) {
case 401:
location.href = '/login'
break
}
})
}
然后在axios.config.js中将@/plugins/axios注册到plugins代码块中：
plugins: [
'@/plugins/vue-mavon-editor',
'@/plugins/axios',
'@/plugins/bdtj.js' /* 百度统计 */
]
自定义局部设置
上面说了全局的拦截和配置，如果说某几个功能需要一些特殊的header啊或者其他的配置怎么办呢
this.$axios.setHeader('token', token)
this.$axios.setHeader('key', key)
for (const item of data.defaultPaper.questionGroupList) {
for (const question of item.questionWrapperList) {
const { data } = await $axios.get('https://ecs.qmth.com.cn:8878/api/ecs_oe_student/examQuestion/getQuestionContent?questionId=' + question.questionId + '&exam_record_id= ')
console.log(data)
result.push(data)
}
}
总结
以上就是个人总结的nuxt使用axios模块的一些经验，希望能帮到你
原文地址：http://blog.bugchang.com/article/9