fetch函数返回promise而不是对象[重复]

Question

我在functions.js 中有一个函数getData，当我在另一个文件中调用scripts.js 时，它返回promise 而不是对象。

//------ functions.js ------

export async function getData(arg1,arg2,arg3) {

...

let result = await fetch(proxyUrl + targetUrl, requestOptions)
    .then(response => response.json())
    .catch(error => console.log('error', error));

return result
    }

当我这样调用时，我得到了一个 Promise：

//------ scripts.js ------

import {getData} from './functions';

let result = getData(arg1,arg2,arg3)
console.log(result)

但即使我这样调用，我也会收到错误：

//------ scripts.js ------

import {getData} from './functions';

let result = awiat getData(arg1,arg2,arg3)
console.log(result)

“未捕获的语法错误：意外的保留字”

Answer 1

getData 是一个 async 函数并返回一个 Promise 和 await 只允许在 async 函数内。

export async function getData(arg1,arg2,arg3) {
  try {
    const response = await fetch(proxyUrl + targetUrl, requestOptions)
    return await response.json()
  } catch(err) {
    console.log(err)
    throw err
  }
}

import { getData } from './functions';

getData(arg1,arg2,arg3).then(result => {
  console.log(result)
})

或者这样

import { getData } from './functions';

const print = async () => {
  const result = await getData(arg1,arg2,arg3)
  console.log(result)
}

print()

Answer 2

不要使用 .then() 和 .catch() 显式基于 promise 的代码，而是在 async 函数中使用 try/catch 块和实际的 return 语句：

export async function getData(proxyUrl, targetUrl, requestOptions) {
    try {
        let response = await fetch(proxyUrl + targetUrl, requestOptions);
        return response.json();
    } catch (error) {
        console.log('error', error);
    }
}

当然，这个函数仍然返回一个Promise。每个async 函数都可以。承诺实际上永远不会消失，async/await 只会隐藏它们。它是语法糖。这很重要：您不能从异步函数返回值，再多的语法糖也无法改变这一事实。

所以当你调用它时，要么await它在另一个async函数中

async function main() { 
    var data = await getData(...);
}

或在常规函数中使用 Promise 语义：

function main() { 
    getData(...).then(data => ...);
}