Async/await vs然后在React的例子中，只有Async/await工作，为什么?

Question

我正在尝试遵循"使用JavaScript Fetch api"一节中在https://blog.logrocket.com/modern-api-data-fetching-methods-react/上描述的两个示例;和"使用async/await语法"。

我试图将这两种方法应用于React应用程序中的https://dog.ceo/api/breeds/image/random。我设法获得第二种工作方法，但不是第一种。我正试图更好地理解这两种方法之间的区别，特别是第一种方法是否存在根本问题，或者我是否只是没有正确地实现它。

我对异步性和承诺只有一个模糊的理解。我通读了一遍Async/await vs那么哪个是最好的性能?但我觉得我对这个问题还没有很好的把握。也许有人可以利用下面的例子来帮助我更好地理解潜在的概念?

"Then"实施

import {useEffect} from 'react';
export default function App() {
useEffect(() => {
fetch(`https://dog.ceo/api/breeds/image/random/`)
.then((response) => response.json())
.then((jsonResponse) => {
console.log(jsonResponse)
});
}, []);
return (
<div className="App">
</div>
);
}

结果为"未能获取";错误，请参阅https://codesandbox.io/s/great-albattani-eu5zq1?file=/src/App.js

"Async/await"implementation"

import { useEffect } from "react";
export default function App() {
const getDogPic = async () => {
const response = await fetch("https://dog.ceo/api/breeds/image/random");
const dog = await response.json();
console.log(dog);
};
useEffect(() => {
getDogPic();
}, []);
return <div className="App"></div>;
}

运行成功，参见https://codesandbox.io/s/keen-chaplygin-zr1pft?file=/src/App.js

Answer 1

从第一个示例中删除尾随斜杠

useEffect(() => {
fetch(`https://dog.ceo/api/breeds/image/random`)
.then((response) => response.json())
.then((jsonResponse) => {
console.log(jsonResponse)
});
}, []);

这里没有什么特别要理解的，无论出于什么原因，API端点不能使用尾斜杠。