Vue 2中使用Fetch API设置变量：异步任务异常排查

核心问题：异步任务的执行顺序 #

你遇到的问题本质是JavaScript的异步执行机制导致的：

• insertData方法里调用insertDataAPI后，会立刻执行console.log(this.pg)，但此时Fetch请求还没完成，pg还是初始的空字符串。
• 而then回调里能打印page，是因为这个回调会等到Fetch请求完成、数据返回后才执行，这时候this.pg = page其实已经生效了，只是你在异步任务完成前就打印了，所以看不到更新后的值。
• 另外你在then里写的async page => this.pg = await page是多余的，因为res.json()已经返回了一个解析好JSON数据的Promise，第二个then接收的page就是已经解析完成的数据，不需要再await。

修复步骤 #

1. 让insertDataAPI返回Fetch的Promise，这样上层方法可以等待它完成
2. 在insertData里用async/await等待异步操作结束后再访问pg
3. 去掉then里多余的async/await

修改后的代码 #

data(){
  return{
    pg:''
  }
},
methods:{
  async insertData(){
    await this.insertDataAPI()
    console.log(this.pg)  // 现在能输出正确的数据了
  },
  insertDataAPI(){
    // 返回fetch的Promise，让上层可以await
    return fetch('EndPoint', {
      method:'POST',
      headers:{
        // some headers
      },
      body:JSON.stringify({
        // some data
      })  
    }).then( res => res.json())
      .then(page => {
        this.pg = page
        console.log(page) // 这里依然可以正常打印数据
      }).catch( (err) => {
        console.log(err)
      });
  }
}

额外说明 #

如果不想用async/await，也可以在insertData里通过then链式调用等待结果：

insertData(){
  this.insertDataAPI().then(() => {
    console.log(this.pg)
  })
}

内容的提问来源于stack exchange，提问作者Kenneth mwangi