• 中文
  • 注册
    • 查看作者
    • nuxt入门教程 在nuxt中使用axios

      1.安装

      注意这里的写法,是@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.idepy.com", //设置统一的基础url,线上环境关闭代理时使用它。
          proxy: true, // 表示开启代理
          prefix: '/api', // 表示给请求url加个前缀 /api
          credentials: true // 表示跨域请求时是否需要使用凭证
        },
      proxy: {
          '/api': {
            target: 'http://localhost:3002/', // 目标接口域名
            pathRewrite: {
              '^/api': '/', // 把 /api 替换成 /
              changeOrigin: true // 表示是否跨域
            },
          }
      },

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

      build: {
          vendor: ['antd','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用法不一样。我当时查了半天才恍然大悟。

    • 0
    • 0
    • 0
    • 339
    • 请登录之后再进行评论

      登录
    • 做任务
    • 发表内容
    • 实时动态

    • 关于伊迪派 | 联系我们 | 免责声明 | 侵权投诉 | 小黑屋

      本站资源来源于互联网,仅供个人学习参考研究之用,请于下载后24小时内删除。
      如有侵犯您的权益,可通过邮件(admin@idepy.com)、站内通道等方式反馈,本网站将在第一时间处理。
      Copyright © 2019 - 2020 伊迪派(IDEPY), All Rights Reserved · 粤ICP备12030819号-6 · 粤公网安备 44132202100185号