H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue中在页面加载时发送ajax请求获取数据渲染不到页面上

ajax请求写在created中,在请求成功的函数中把请求的数据 赋值给data中的空数组 ,然后在mounted中打印 data中数据为空 。需要在页面加载完成时把数据调回来渲染到页面上
clipboard.png

回答:

别再created中请求 this还没有创建完成 你可以在mounted中请求

你这个this保存成了that?

那你打印that.list

还有在created中请求也行但是不能用箭头函数

回答:

反驳一下楼上,created中this已经指向当前vue示例。
另外分析一下执行顺序,
Created -> 发送 ajax —> mounted -> ajax回调

所以 先看看请求的接口回来的数据线。 另外最好能在线上复现一下bug,给jsfiddle连接最好

回答:

是放在Created里没错,你在请求成功的地方能打印出数组么?

回答:

你created中的ajax请求是异步的,也就是说在组件mounted的时候这个请求可能并没有完成,赋值也就还没执行,打印出来当然是空

回答:

created中的ajax使用promise即可

回答:

ajax请求是异步的,建议加上async: false,

回答:

ajax是异步执行的。

<div>{{bookId}}</div>

在setData里面处理数据

export default {
    name: 'app',
    data() {
        bookId : ''
    },
    created(){
        this.loadData(this.setData);
    },
    methods:{
       loadData(callBack) {
        const This = this;
        const url = 'https://api.douban.com/v2/book/1220562';
        getBookPromise()
          .then(res => {
            console.log(res)
            callBack(res.body); //callBack异步回调
          })
          .catch(res => {
            console.log(res);
          })

        function getBookPromise() {
          return new Promise((resolve, reject) => {
            This.$http.jsonp(url)
              .then(res => {
                resolve(res)
              })
              .catch(res => {
                reject(res)
              })
          })
        }
      },
      setData(data) { //对数据做一些处理
        this.bookId = data.id;
        console.log(this.bookId)
      }
    }
}

本文地址:H5W3 » vue中在页面加载时发送ajax请求获取数据渲染不到页面上

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址