如何使用 fetch 从 api 获取数据

Question

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

我已经按照挑战的要求定义了 displayCartTotal 函数。 并且经过验证是正确的。 我还定义了 fetchBill 函数，它返回了一个承诺。 在promise中，promiseStatus是“resolved”，promiseValue是一个Array。 我没有收到任何错误，但这似乎并没有解决挑战的问题。

    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 请求的整个承诺。

Answer 1

进程失败的一个可能原因是 Javascript 在 tge promise 之后继续，并在 promise 进程完成之前返回result 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}`));


};

Answer 2

您的情况下的 fetch 返回未满的承诺。 在这种类型中实现提取。

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

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 4

  Token.fromJson(Map<String, dynamic> json) {
    accessToken = json['access_token'];
    tokenType = json['token_type'];
    refreshToken = json['refresh_token'];
    expiresIn = json['expires_in'];
    scope = json['scope'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['access_token'] = this.accessToken;
    data['token_type'] = this.tokenType;
    data['refresh_token'] = this.refreshToken;
    data['expires_in'] = this.expiresIn;
    data['scope'] = this.scope;
    return data;
  }



 @override
  void initState() {
    Webservice().countryFetch().then((value) {
      setState(() {
        countries = value;
        isLoading = false;
      });
    });
    super.initState();
  }