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

Question

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

Answer 1

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

你这个this保存成了that？

那你打印that.list

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

Answer 2

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

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

Answer 3

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

Answer 4

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

Answer 5

created中的ajax使用promise即可

Answer 6

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

Answer 7

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)
      }
    }
}