nuxt入门教程（四）在nuxt中使用axios

安装

注意这里的写法，是@nuxtjs/axios
而不是直接axios，否则你下面配置的时候会提示找不到axios

cnpm install @nuxtjs/axios

逻辑上的坑

unxtjs的ajax，你先别往你那个异步上去思考，其实这里面所有的ajax最后都会形成页面。你别想着，我一点按钮，调用一个方法，然后再ajax去加载数据。因为我们最后全部都会生成静态，所以任何的获取数据的操作，最后都会变成页面的跳转。

所以，官方给了一套写法，你必须按照这个去写，
并且这里的ajax会再页面渲染之前就执行。这个东西跟生命周期这些都是平级的。

// 这里引入context是上下文参数，代替了this，
// 因为在asyncData方法是在组件初始化时调用，所以没法通过this来引用组件实例对象。
asyncData(context) {
    return context.$axios.get('index/query')
    .then(res => {
    //获取到内容
    console.log(res.data.result[0].logo);
    //赋值
     return {txt:res.data.result[0].logo};
   })
},

然后打开nuxt.config.js
开始修改，先把代理这块写好

modules: [
  '@nuxtjs/axios'
],
axios: {
    //baseURL:"api.dangyunlong.com", //设置统一的基础url，线上环境关闭代理时使用它。
    proxy: true, // 表示开启代理
    prefix: '/api', // 表示给请求url加个前缀 /api
    credentials: true // 表示跨域请求时是否需要使用凭证
  },
proxy: {
    '/api': {
      target: 'http://localhost:3002/', // 目标接口域名
      pathRewrite: {
        '^/api': '/', // 把 /api 替换成 /
        changeOrigin: true // 表示是否跨域
      },
    }
},

然后下面，加上axios，防止二次打包

build: {
    vendor: ['element-ui','axios'],
    postcss: {
      preset: {
        features: {
          customProperties: false
        }
      }
},

这样就可以了。

延申：如何同时发起多个请求

async asyncData({$axios}){
  let index = await $axios.get("index/query");
  let list = await $axios.get("index/query/list");
  return {
    index: index.data.result[0],
    list: list.data.result
  }
},

必须使用这种方式才能同时发起多个请求。

延申2，如果通过接收route的参数，发送带参数的请求

async asyncData ({params,$axios}) {
    //这里有几个巨坑的地方 这里的params 就是指route.params
    //这里的store就是指 $store
    let data = await $axios.get(`article/query?id=${params.id}`);
    return {
      data: data.data.result[0]
    }
  }

把params传入asyncData里面
这里就又有一个问题，这里的params直接就指你的route.params了，跟vuecli里面的this.$route.params用法不一样。我当时查了半天才恍然大悟。