如何使用提取从api获取数据

Question

我正在创建一个fetchBill函数。分配https://randomapi.com/api/006b08a801d82d0c9824dcfdfdfa3b3c到一个api变量。它使用浏览器的fetch函数向api发出HTTP请求。它在一个函数中使用箭头函数。然后调用fetch函数，并在将其转换为JSON后返回响应。使用另一个。然后调用第一个函数，该函数将JSON数据传递给displayCartTotal函数。最后，它处理可能发生的错误，例如在控制台中显示警告消息。

我已经定义了挑战所需的displayCartTotal函数。已经被证实是正确的。我还定义了finchBill函数，它正在返回一个promise。在promise中，promise状态是“解决的”，promise值是一个数组。我没有得到任何错误，但这似乎并不能解决挑战的问题。

    const displayCartTotal = ({results}) => results;

    const fetchBill = () => {
    const api = 
    "https://randomapi.com/api/006b08a801d82d0c9824dcfdfdfa3b3c";
    const results = fetch(api)
        .then(res => res.json())
        .then(data => displayCartTotal(data))
        .catch(err => console.log(`Warning!!! Error fetching data!!! 
        Error ${err}`));
        return results;
};

通过调用displayCartTotal函数，fetchBill函数应该返回fetch请求返回的json对象的results属性。我相信返回的是promiseValue，而不是http请求的全部promise。

Answer 1

const displayCartTotal = ({results}) => results;

const fetchBill = () => {
   const api = "https://randomapi.com/api/006b08a801d82d0c9824dcfdfdfa3b3c";
   fetch(api)
   .then(response => response.json())
   .then(data => displayCartTotal(data))
   .catch(err => console.log(err));
};

Answer 2

在您的情况下，读取返回没有完全填充的promise。在此类型中实现读取。

fetch('https://randomapi.com/api/006b08a801d82d0c9824dcfdfdfa3b3c')
    .then((resp) => {
        if (!resp.ok) {
            if (resp.status >= 400 && resp.status < 500) {
                return resp.json().then((data) => {
                    let err = { errorMessage: data.message };
                    throw err;
                });
            } else {
                let err = { errorMessage: 'Please try again in some time, Server Error!' };
                throw err;
            }
        }
        return resp.json();
    })
    .then((data) => {
        console.log(data.results[0].buyerCountry);
        console.log(data.results[0].itemsInCart);
    })

Answer 3

进程失败的一个可能原因是，Javascript在tge promise之后继续，并在promise进程完成之前返回结果var

解决此问题的最简单方法是将thw return添加到then中：

const displayCartTotal = ({results}) => results;

const fetchBill = () => {
const api = 
"https://randomapi.com/api/006b08a801d82d0c9824dcfdfdfa3b3c";
const results = fetch(api)
    .then(res => res.json())
    .then(data => displayCartTotal(data))
   .then(return results;)
    .catch(err => console.log(`Warning!!! Error fetching data!!! 
    Error ${err}`));


};