• 中文
  • 注册
    • 查看作者
    • Nuxt.js asyncData方法获取数据(await axios和 axios区别)

      在项目中需要在初始化页面前先得到数据,也就是我们常说的异步请求数据。Nuxt.js贴心的为我们扩展了Vue.js的方法,增加了asyncData(){……}。从名字上就很好理解,这是一个异步的方法。

      创建远程数据
      在这里制作一些假的远程数据,我选择的网站是myjson.com,它是一个json的简单仓库,学习使用是非常适合的。我们打开网站,在对话框中输入JSON代码,这个代码可以自己随意输入哦。

      {
        "name": "名字",
        "age": 18,
        "interest": "I love coding!"
      }

      输入后,网站会给你一个地址,这就是你这个JSON仓库的地址了。

      https://api.idepy.com/bins/g5whc

      安装Axios
      Vue.js官方推荐使用的远程数据获取方式就是Axios,所以我们安装官方推荐,来使用Axios。这里我们使用npm 来安装axios。直接爱终端中输入下面的命令:

      npm install axios --save

      注意:由于asyncData方法是在组件 初始化 前被调用的,所以在方法内是没有办法通过 this 来引用组件的实例对象。 

      Nuxt.js asyncData方法获取数据(await axios和 axios区别)

      asynccData的promise方法

      我们在pages下面新建一个文件,叫做ansyData.vue

      然后写入下面的代码:

      <template>
          <div>
              <h1>姓名:{{info.name}}</h1>
              <h2>年龄:{{info.age}}</h2>
              <h2>兴趣:{{info.interest}}</h2>
              <p><nuxt-link to='/'>Home</nuxt-link></p>
          </div>
      </template>
      <script>
      import axios from 'axios'
      export default {
          data() {
              return {
                  name: 'muzidigbig',
              }
          },
          //方式一(await)
          // async asyncData(context) {
          //     console.log(await axios.get('https://api.idepy.com/bins/1dkbio')) 
          //     let {data} = await axios.get('https://api.idepy.com/bins/1dkbio') 
          //     return {info:data}
          //     error(params)//当请求错误时直接跳转到错误页面(放在返回值之后)
          // },
          //方式二
          asyncData ({ params }) {//请求
      return  axios({
          method: 'get',
          url: 'https://api.idepy.com/bins/1dkbio'
      })
      .then(function (response) {
                  console.log(response.data)
                  return { info: response.data};
                  error(params)
              })
          },
      }
      </script>


      请求方式一:

      asyncData ({ params }) {//请求
          return  axios({
      method: 'get',
      url: '后台api接口'
          })
          .then(function (response) {
        return { posts: response.data.slice(0, 5) }
          })
      },

      请求方式二:

      async asyncData ({ params }) {
          let { data } = await axios({
      method: 'get',
      url: '后台api接口'
      })
          return { posts: data.slice(0, 5) }
      },

      Nuxt.js asyncData方法获取数据(await axios和 axios区别)

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

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

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

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