在 React 中使用 ECMAScript 2016 (ES7) async/await
前言
在编写 React 应用时，有时我们需要处理异步操作。而 JavaScript 使用回调函数或 Promise 处理异步操作，代码可读性较差。在 ES2015 中，引入了 async/await，极大地改善了异步代码的可读性。本文将介绍在 React 中使用 async/await 处理异步操作。
什么是 async/await？
async/await 是 ES7 （2016）中引入的语法糖，可以使异步代码的写法更加简洁明了。async 函数返回值是一个 Promise 对象，await 表达式会阻塞后面的代码，直到 Promise 对象返回结果。下面是一个示例：
async function fetchData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
}
fetchData().then(data => console.log(data));这里使用 async 定义了一个名为 fetchData 的函数，函数内使用 await 关键字获取 Promise 对象的结果。当 fetch 请求完成后，会执行第二个 await 和返回 Promise 对象的 data 方法。fetchData 函数返回一个 Promise 对象，因此我们可以使用 then 方法处理结果。
React 中的 async/await
React 中处理异步操作与普通 JavaScript 代码类似。当然，我们需要使用 React 的生命周期函数来管理异步操作。
在 useEffect 中使用 async/await
useEffect 是 React 中一个类似于 componentDidMount 和 componentDidUpdate 的 Hook，用于管理组件中的异步任务。使用 async/await 处理异步任务：
// javascriptcn.com 代码示例
import React, { useState, useEffect } from 'react';
function App() {
const [data, setData] = useState([]);
async function fetchData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
setData(data);
}
useEffect(() => {
fetchData();
}, []);
return <div>{/* 组件内容 */}</div>;
}这里我们定义了一个名为 fetchData 的异步函数，数据加载完成后，将返回的数据传递给 setData 函数。在 useEffect 中，依次调用 fetchData 函数和空数组 []。空数组表示这个 Hook 只执行一次。
使用 async/await 处理事件
在 React 中，通常使用事件来处理用户的操作。在事件处理程序中使用 async/await 处理异步任务，也非常容易：
// javascriptcn.com 代码示例
import React, { useState } from 'react';
function App() {
const [data, setData] = useState([]);
async function handleClick() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
setData(data);
}
return <button onClick={handleClick}>Load data</button>;
}在这里，我们使用 useState 函数维护 data 状态。在 handleClick 事件处理程序中调用 setLoading 函数，加载数据并将其传递给 setData。
错误处理
当处理异步操作时，经常会遇到错误。对于 Promise，我们可以使用 catch 方法处理错误。对于 async/await，可以使用 try/catch 语句来处理错误：
// javascriptcn.com 代码示例
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
if (response.ok) {
const data = await response.json();
setData(data);
} else {
console.error(response.statusText);
}
} catch (error) {
console.error(error);
}
}在这里，我们在 fetchData 函数中使用 try/catch 语句来处理错误。如果 fetch 请求返回一个错误的 HTTP 状态码，我们使用 console.error 打印错误信息。
总结
async/await 是处理异步操作的一种更加简洁明了的方式，可以提高代码的可读性。在 React 中使用 async/await 也很容易。本文介绍了使用 async/await 处理 useEffect 和事件以及错误处理的示例代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652e47bf7d4982a6ebf53141