调用OpenSea异步API前端显示[object Promise]而非返回数据如何解决？

错误原因 #

• 所有async函数的返回值本质都是Promise对象，你没有等待异步请求完成就直接将返回的Promise实例赋值给了options，模板渲染时自然会显示[object Promise]而非实际接口返回数据
• 你只在getData函数内部用await等待了请求响应，但调用getData的位置没有加await，也没有通过.then()回调获取异步返回结果

解决方案 #

方案1：通过.then()回调赋值（全框架通用） #

在类内部调用时通过Promise的then回调拿到结果后再给变量赋值：

getData('https://api.opensea.io/api/v1/asset/0xb47e3cd837ddf8e4c57f05d70ab865de6e193bbb/1/')
.then(res => {
  this.options = res
})

方案2：调用处加await（需放在async函数内部） #

如果是在生命周期钩子中调用，把钩子函数也声明为async即可：

Vue 示例

async mounted() {
  this.options = await getData('https://api.opensea.io/api/v1/asset/0xb47e3cd837ddf8e4c57f05d70ab865de6e193bbb/1/')
}

Angular 示例

async ngOnInit() {
  this.options = await getData('https://api.opensea.io/api/v1/asset/0xb47e3cd837ddf8e4c57f05d70ab865de6e193bbb/1/')
}

优化建议 #

可以给getData函数增加异常捕获逻辑，避免接口报错导致页面异常：

async function getData(url){
  try {
    let response = await fetch(url);
    let data = await response.json();
    const _data = [data.name, data.id]; 
    console.log(_data); 
    return _data[0];
  } catch (err) {
    console.error('接口请求失败：', err)
    return ''
  }
}

同时可以给options设置初始空值，避免渲染阶段出现undefined提示。

内容的提问来源于stack exchange，提问作者Isaac Lyne