Promise.all 不等待 Promise 解決

Question

當我向服務器發出請求時，數據作為包含正確數據的承諾（如預期）返回，但由於某種原因，程序無法正確執行。

此外，該程序在我將其上傳到 Zeit 之前就已經運行了。

獲取請求：

1）我知道我不需要“內容類型”：“應用程序/json”。 刪除它不會影響程序。

2) 這是一個 GET 請求，端點工作正常。 此外，當我在 Postman 中執行相同的請求時，我得到了正確的結果。

// CODE ABOVE DOES NOT MATTER
       .then( ([hours, employees, dayLabor]) => {
           // hours, employees, and dayLabor are empty lists for this exercise '[]'

            let business = fetch(`${config.URL}/${TokenService.getId()}`,
            {
                headers: {
                    'content-type': 'application/json',
                    'table':'business',
                    'Authorization':`bearer ${TokenService.getAuthToken()}`
                }
            })
            .then(data => {
              console.log('business: ',data, ' or ', data.json());
              if (!data.ok){
                  return data.json().then(e => Promise.reject(e));}

              return data.json();
            });


            return Promise.all([business, hours, employees, dayLabor]);
      })
      .then( ([business, hours, employees, dayLabor]) => {  
            // THIS is never executed?

            console.log('completed');            

            //fetch has been completed and the state has been updated so set "fetched" to true

            this.setState({business, hours, employees, 'dayLabor': dayLabor.length>0? this.sort(dayLabor):[], fetched: true});


      })
      .catch(error => {
            console.error({error});
      });

輸出結果（出於隱私原因將 url 塗掉）：

business:  
Response {type: "cors", url: "https://xxxxxx.herokuapp.com/1", redirected: false, status: 200, ok: true, …}
type: "cors"
url: "https://xxxxxxxx.herokuapp.com/1"
redirected: false
status: 200
ok: true
statusText: "OK"
headers: Headers {}
body: (...)
bodyUsed: true
__proto__: Response
  or  
Promise {<pending>}
__proto__: Promise
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: Array(1)
0: {id: 1, business_name: "Fake Company Inc"}
length: 1
__proto__: Array(0)

我想訪問“[[PromiseValue]]”中的對象。 我很困惑為什么這不起作用，特別是因為當我在本地運行它時它確實有效？ 似乎問題在於“業務”變量或“Promise.all”沒有等待承諾解決。

任何幫助將不勝感激，我一直在搜索，但找不到任何解決方案。

Answer 1

一個特殊的問題是您只能調用data.json()一次。 它讀取 http 響應的其余部分（主體），然后對其進行解析）。 一旦讀完，就不能再讀了。 所以，當你這樣做時：

console.log(..., data.json())

您正在指示響應對象讀取響應正文並返回一個承諾，該承諾將告訴您何時完成。 然后記錄尚未實現的承諾。 然后，你把那個承諾丟在地上，永遠不要對它做任何事情。

然后，稍后在您的代碼中，您執行

return data.json();

但是，沒有更多的響應體，它已經被讀取了。 您不能多次調用此方法。 所以，這行不通。

因此，首先要解決的是從console.log()刪除data.json() console.log()並讓

return data.json();

處理讀取正文並解析一次響應。

所以，改成這樣：

   // CODE ABOVE DOES NOT MATTER
   .then( ([hours, employees, dayLabor]) => {
       // hours, employees, and dayLabor are empty lists for this exercise '[]'

        let business = fetch(`${config.URL}/${TokenService.getId()}`,
        {
            headers: {
                'content-type': 'application/json',
                'table':'business',
                'Authorization':`bearer ${TokenService.getAuthToken()}`
            }
        }).then(data => {
          console.log('business: ', data);
          if (!data.ok){
              return data.json().then(e => Promise.reject(e));}

          return data.json();
        });


        return Promise.all([business, hours, employees, dayLabor]);
  }).then( ([business, hours, employees, dayLabor]) => {  
        // THIS is never executed?

        console.log('completed');            

        //fetch has been completed and the state has been updated so set "fetched" to true

        this.setState({business, hours, employees, 'dayLabor': dayLabor.length>0? this.sort(dayLabor):[], fetched: true});


  }).catch(error => {
        console.error({error});
  });