Nuxt封装@nuxtjs/axios请求后端数据

npm install @nuxtjs/axios -s

在​​plugins​​​新建​​axios​​文件配置公共请求

export default ({ app: { $axios, redirect } }, inject) => {
  $axios.defaults.baseURL = 'http://api.com'
  $axios.setHeader('Content-Type', 'application/x-www-form-urlencoded')
  $axios.defaults.timeout = 10000;
  $axios.onRequest(req => { })
  $axios.onResponse(res => {
    if (res.data.code == 2000) {
      return Promise.resolve(res)
    } else {
      return Promise.reject(res)
    }
  })
  $axios.onError(err => {
    return Promise.reject(err)
  })
  
  // 向nuxt注入一个内置的方法
  inject('axiosApi', (url, params, method) => {
    return new Promise((resolve, reject) => {
      $axios({
        method: method || "POST",
        url: url,
        data: params
      }).then(res => {
        resolve(res)
      }).catch(err => {
        reject(err)
      });
    })
  })
}

在​​asyncData​​打印上下文，可以发现我们方法注入进去了

asyncData(ctx){
  ctx.$axiosApi(...)
}
// 在methids里面写
this.$axiosApi(...)

asyncData方法

asyncData 方法会在组件每次加载之前被调用
asyncData 可以在服务端或路由更新之前被调用
asyncData 返回的数据融合到组件的data方法
asyncData 方式是在组件初始化前被调用，方法内饰无法通过​​​this​​来引用组件的实例对象

查看源代码可以查看请求到的数据