nuxt.js使用axios发送http请求

看这篇文章之前，默认你是知道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