ES6新增Promise对象之异步调用的福音

2023-12-18 05:00:49

JavaScript中的异步调用

在前端开发中，异步调用是一个非常常见的场景。它允许我们在不阻塞主线程的情况下执行耗时的操作，从而提高程序的响应速度。最常见的异步调用场景之一就是处理AJAX请求。

AJAX请求是一种异步的HTTP请求，它允许我们向服务器发送请求并接收响应，而不会阻塞主线程。当我们发送一个AJAX请求时，浏览器会创建一个XMLHttpRequest对象，并将其发送到服务器。服务器处理请求后，会返回一个响应，浏览器会将响应内容加载到页面中。

在传统的方式中，我们需要使用回调函数来处理AJAX请求的响应。回调函数是一个在异步操作完成后执行的函数。当AJAX请求完成时，浏览器会调用回调函数，并将响应内容作为参数传递给回调函数。

$.ajax({
  url: '/api/users',
  success: function(response) {
    console.log(response);
  },
  error: function(error) {
    console.error(error);
  }
});

这种方式虽然可以实现异步调用，但是存在一些问题：

回调函数的嵌套会导致代码难以阅读和维护。
当有多个异步操作时，难以控制它们的执行顺序。
回调函数无法取消或中断正在执行的异步操作。

Promise对象

ES6中引入的Promise对象是一种新的异步编程方式，它解决了回调函数的这些问题。Promise对象代表一个异步操作的结果，它可以处于三种状态：

pending ：等待结果的状态。
fulfilled ：已经成功完成的状态。
rejected ：已经失败的状态。

Promise对象可以通过两种方式创建：

使用Promise构造函数。
使用Promise.resolve()或Promise.reject()函数。

// 使用Promise构造函数创建Promise对象
const promise = new Promise(function(resolve, reject) {
  // 异步操作
  setTimeout(() => {
    resolve('成功');
  }, 1000);
});

// 使用Promise.resolve()函数创建Promise对象
const promise = Promise.resolve('成功');

// 使用Promise.reject()函数创建Promise对象
const promise = Promise.reject('失败');

一旦Promise对象创建后，我们可以使用then()方法来处理其结果。then()方法接受两个参数：

onFulfilled ：在Promise对象成功完成时执行的函数。
onRejected ：在Promise对象失败时执行的函数。

promise.then(function(result) {
  console.log(result);
}, function(error) {
  console.error(error);
});

then()方法还可以返回一个新的Promise对象，这使得我们可以将多个异步操作串联起来。

const promise1 = Promise.resolve('成功1');
const promise2 = Promise.resolve('成功2');

promise1.then(function(result1) {
  console.log(result1);
  return promise2;
}).then(function(result2) {
  console.log(result2);
});