如何在 JS FETCH API 外部访问返回值 [重复]答案

【问题标题】：How to access outside the JS FETCH API the returned value [duplicate]如何在 JS FETCH API 外部访问返回值 [重复]
【发布时间】：2020-03-05 17:32:56
【问题描述】：

我是 Typescript React 和 Ionic 框架的新手。

我正在使用 JS FETCH API 并从第三方获取数据。现在，我想获取获取的数据并将其返回到我的 DOM，但我不知道如何在我的 Fetch 之外访问获取的数据。

请赐教..谢谢

function getData() {
fetch('URL')
.then(response => {
return response.json();
}).then(data_from_fetched => {
let data = data_from_fetched.results;
return data;
}}

let data = getData()
console.log(data); //undefined

让数据 = getData() 控制台.log（数据）； //未定义

我也试过这个异步..

async function getData() {
fetch('url')
.then(response => {
return response.json();
}).then(data_from_fetched => {
console.log(data_from_fetched)
let data = data_from_fetched.results;
return data;        
})

}

getData().then(data => console.log(data));

或者这个..

function getData() {
fetch('url')
.then(response => {
return response.json();
}).then(data_from_fetched => {
console.log(data_from_fetched)
let data = data_from_fetched.results;
return data;        
})
}

let data= getData();

// 并将其显示在我的 DOM 上

{movies.map(movie => movie){
let title = <IonCardTitle>{movie.title}</IonCardTitle>}}

【问题讨论】：

标签： javascript reactjs typescript ionic-framework

【解决方案1】：

你需要从你的 getData 函数中返回一个 promise，你可以这样做

function getData() {
  return new Promise((resolve, reject) => {
    fetch('URL')
     .then(response => {
       return response.json();
      }).then(data_from_fetched => {
         let data = data_from_fetched.results;
         resolve(data);
   }
})    
}

那你可以这样称呼它

let movies = '';
getData().then(data => {
  movies = data
});

希望对你有帮助

【讨论】：

有效！！非常感谢，最后一个问题，如何访问 PromiseValue 中的数组？试过这段代码 getData().then(data => { return data.PromiseValue; });常量电影 = getData(); console.log(movies) 但错误。
我已经编辑了答案以将响应保存在变量中，但是如果您使用 react 我建议将其保存到状态
因为 fetch 返回一个 Promise，在 Promise 构造函数中包装 fetch 调用是一种反模式——你也失去了处理错误的能力，如果有错误，那个承诺你的回归将永远等待 -
getData 应该的正确写法如下：const getData = () => fetch('URL').then(response => response.json()).then(({results}) => results);
我的类型未知.. :O