处理从获取返回的正确方法

Question

我对以 JS/TS 方式编码有点陌生，我只是想知道有关 returning 和处理来自获取的 void 和值的最佳实践.简而言之，我想使用 fetch 在某处检索一个 JSON 文件，提取一些相关信息，然后 return 一个字典。

async function doSomething() {
    const response =  fetch(...)
    .then(response =>
        response.json().then(data => ({
            data: data,
            response: response.ok
        }))
    )
    .then(data => {
        if (!data.response) {
            console.warn("Response was not ok...")
            return null
        } else if (data.data["results"] == 0) {
            console.info("Returned no results")
            return null
        } else {
            const returned = {
                name: data.data["stuff"],
                thing: data.data["other"]
            }
            return returned
        }
    })
    .catch(error => console.error(`${error}`))

return response

TS return 当我想使用 dict 的值时，出现 Property 'name' does not exist on type 'void | {...} 错误。错误，我完全理解。当使用该函数时，我尝试进行类型检查以处理它 return 无效的情况，但它仍然会引发类似这样的错误：

const request = await getQuery("movie", query)
    if (request === undefined || request === null) return "I wasn't able to find your query."
    const data = {
        name: request.name
    }
}

我只是想知道编写和处理 void 以及使用字典值的最佳方式是什么。

Answer 1

我不会让函数做太多事情。让它专注于 return 处理一些数据，并让调用它的函数处理数据的使用方式。

如果您要使用 async/await you should be consistent。将 async 与 then 混合使用没有多大意义。这样你要么去 return 一些数据，要么抛出一个错误。

async function getData(endpoint) {
  try {
    const response = await fetch(endpoint);
    if (response.ok) {
      const { data } = await response.json();
      return data;
    } else {
      throw new Error('Response error.');
      return undefined;
    }
  } catch (err) {
    console.warn(err);
  }
}

async function main() {
  const endpoint = 'http://example.com';
  const data = await getData(endpoint);
  if (data && data.results) {
    console.log(data.results.name);
  } else {
    console.warn('No results');
  }
}

main();

处理从获取返回的正确方法

Proper way of dealing with returning from a fetch

javascript

typescript

fetch-api