TypeScript 中的异步和同步-JavaScript中文网-JavaScript教程资源分享门户

在 TypeScript 中，异步和同步是经常会出现的概念。异步操作是指在处理一个任务时，不会立即完成，而是需要等待一段时间才能得到结果，比如向服务器发起请求、读取文件等等。而同步操作则是指任务执行时，必须一直等待该任务完成，才能继续进行其他的操作。

在本文中，我们将深入探讨 TypeScript 中的异步和同步，包括使用 async/await 、Promise 和回调函数等方式处理异步代码，以及如何避免异步编程中常见的陷阱。

如何使用 async/await 处理异步

在 TypeScript 中，async/await 是最受欢迎的处理异步编程的方式之一。async/await 让异步代码的编写和阅读变得更加直观。async 关键字告诉编译器该函数是一个异步函数，await 关键字则用于等待异步操作完成并获取其结果。

async function fetchData(): Promise<string> {
  const response: Response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const json: any = await response.json();
  return json.title;
}

在上面的例子中，fetchData 函数使用 async 关键字标记为异步函数，并且返回的是一个 Promise 对象。fetchData 函数中使用 await 关键字，等待 fetch 函数返回的 Promise 对象完成，并将结果转化为 JSON 对象。最终，fetchData 函数会返回“delectus aut autem”。

Promise 的使用

在 TypeScript 中，通常使用 Promise 来处理异步操作，Promise 本身是一个立即执行的函数（executor），它接受 resolve 和 reject 两个函数，执行器函数中的异步操作最终将根据情况调用 resolve 或 reject 函数来返回结果。

下面是一个使用 Promise 处理异步操作的示例代码：

function fetchData(): Promise<string> {
  return new Promise((resolve, reject) => {
    fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(json => resolve(json.title))
      .catch(error => reject(error));
  });
}

在上面的例子中，fetchData 函数返回一个 Promise 对象，并在 Promise 的 executor 函数中，使用 fetch 函数获取数据，然后使用 Promise 的 then 和 catch 方法来对返回结果进行处理。

处理异步陷阱

在异步编程中，容易遇到以下常见的陷阱：

忘记使用 Promise.catch 捕获错误

Promise 内部的 reject 函数可能导致一个未处理的异常，并且如果不在 Promise 链中使用 catch 方法，将无法捕获异常。下面是一个错误的实例：

fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then(response => response.json())
    .then(json => {
        console.log(json.title);
    });

在上面的代码中，如果发生网络错误或响应数据格式不正确，该 Promise 链将会因未捕获的异常而终止。

忘记使用 async/await

如果异步函数中没有使用 await 关键字，它将会被当作同步函数来执行，并且可能会导致编译器错误。

async function fetchData() {
  fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then(response => response.json())
    .then(json => {
      console.log(json.title);
    });
}

在上面的例子中，fetchData 函数内部虽然有异步操作，但是没有使用 await 关键字，这将导致 fetch 和 then 函数返回的 Promise 会被立即执行，并且在调用 then 函数时还没有完成。

总结

在 TypeScript 中，异步和同步是至关重要的概念，适当地使用异步编程技术可以避免阻塞并提高编程效率。我们讨论了如何使用 async/await 和 Promise 处理异步代码，并且指出了异步编程中经常遇到的陷阱。希望本文能对 TypeScript 开发人员有所帮助，能够继续深入学习 TypeScript 的异步编程。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6535e3a97d4982a6ebd98c54