用 async/await 和一些清晰度重构获取请求

Question

我正在学习 React 教程，您从 yelp API 中获取了一些我不明白的东西，希望有人能够澄清。

1：他们没有使用 async/await，这不应该成为 2021 年的普遍做法吗？

2：我不明白 headers 的 point/use 与授权的关系：Bearer 这是一种更安全的密钥传递方式？我不能在 url 中传递 apiKey 吗？

3：这里没有捕获或错误处理，如果我要实现它，那为什么要插入哪里？

4：本教程让我使用一种叫做 'https://cors-anywhere.herokuapp.com/' 的东西，我真的不明白它的用途。它与根据我的理解创建一种检索 API 的安全方法有关吗？但是如果我想在 netlify 上部署这个项目，我会删除它并传入正常的 api url 来获取吗？或者我将如何重构生产部署？

归根结底，我真的只是在寻找一些关于如何改进这方面的指导。

const { default: SearchBar } = require("../components/SearchBar/SearchBar");

const apiKey = 'some api key from yelp';

const Yelp = {
    searchYelp(term, location, sortBy) {
        return fetch(`https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/businesses/search?term=${term}&location=${location}&sort_by=${sortBy}`, {
            headers: {
                Authorization: `Bearer ${apiKey}`
            },
        }).then((response) => {
            return response.json()
        }).then((jsonResponse) => {
            if (jsonResponse.businesses) {
                return jsonResponse.businesses.map((business) => {
                    return {
                        id: business.id,
                        imageSrc: business.image_url,
                        name: business.name,
                        address: business.location.address1,
                        city: business.location.city,
                        state: business.location.state,
                        zipCode: business.location.zip_code,
                        category: business.categories.title,
                        rating: business.rating,
                        reviewCount: business.review_count,
                    }
                })
            }
        })
    }
}

export default Yelp

Answer 1

Async/Await 是示例中 .then() 调用的语法糖。他们做同样的事情。此外，await 目前只能在异步函数中使用。顶级 await 应该很快就会出来，但现在还没有。
您呼叫的 api 需要授权 header。 “Bearer”是通过此 header 传递的令牌的一个非常常见的前缀。它不是更安全，但是 url 的最大长度为 2048 个字符。您可能无法单独通过 url 传递令牌。
Fetch 通常不会抛出错误，即使它们发生了。一般可以查看响应状态码。这有点老了，但它确实解释了一些事情。 https://www.tjvantoll.com/2015/09/13/fetch-and-errors/
CORS 是一种由浏览器和服务器实施的标准，用于防止未经授权的脚本访问 url。您必须通过设置 CORS 策略允许不同域中的服务器使用您的 api。参见：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

用 async/await 和一些清晰度重构获取请求

Refactoring a fetch request with async/await and some clarity

javascript

api

json

fetch-api