nuxt.js使用axios发送http请求

原文：https://www.jianshu.com/p/9ba523578817

看这篇文章之前，默认你是知道nuxt是什么的，并且知道nuxt怎么使用。
如果不了解的，建议先去看看nuxt的基础知识再来继续阅读本篇文章
nuxt中文官网：https://zh.nuxtjs.org/

nuxt官方推荐使用axios作为http请求的类库。

axios在nuxt中有两种使用场景：

1. 客户端使用
2. 服务端使用

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个后台接口：

1. get articles/1
2. get categories/1

这样的接口proxy没法做设置，因为没规律，不能每个接口都加一条规则吧，所以用axios先给地址加个前缀，这样就变成了：

1. get api/articles/1
2. get api/categories/1

然后我们只要指定/api/这样的Url都通过代理指向http://bugchang.com这个地址，请求的url就会变成：

1. get http://bugchang.com/api/articles/1
2. get http://bugchang.com/api/categories/1

但是实际上我们后台的接口并没有api这个路径，这样访问肯定404，所以我们通过pathRewrite在请求时把/api/这个字符串替换成''：

1. get http://bugchang.com/articles/1
2. get 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进行请求，无论使用哪种效果都是一样的（本人更偏爱第二种）：

1. 返回 Promise

function test1(){ this.$axios.get(`http://blog.bugchang.com/articles/1`) .then((res) => { console.log(res) }) } 

2. 使用 async或await

function test2(){ const { data } = await this.$axios.get(`http://blog.bugchang.com/articles/1`) console.log(data) } 

3. 使用 回调函数

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

作者：BugChang
链接：https://www.jianshu.com/p/9ba523578817
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。