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用法不一样。我当时查了半天才恍然大悟。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. Vue概述 1.1 Vue介绍 Vue 是一套用于构建用户界面的渐进式框架。 1.2 Vue核心思想 双向数...
    nimw阅读 3,669评论 0 4
  • 一、css文件引用图片时,路径的填写 官方文档说明: 从Nuxt 2.0开始,~/alias将无法在CSS文件中正...
    hengist阅读 8,435评论 0 0
  • 回顾 哈喽大家好!又是元气满满的周~~~二哈哈,不知道大家中秋节过的如何,马上又是国庆节了,博主我将通过三天的时间...
    SAYLINING阅读 5,252评论 0 4
  • 我们在实际的Vue项目中经常需要与后端进行数据交互,但是在很大程度上我们需要用到这个插件,但是这里需要注意的一点是...
    Marin_chen阅读 13,738评论 0 5
  • 文|水木幻城 淅沥沥的雨夜,还没褪去冬天的寒冷,路上依然车水马龙。这个城市很特别,典型的江南水乡,却又紧跟时代潮流...
    水木幻城阅读 3,712评论 1 0