入门promise - 技术栈

1.Promise的定义：

promise是JavaScript中用来处理异步任务的一种方式，其本身的结构是一个对象，需要利用new来创建。一个promise就代表一个异步操作处理成功或者失败的结果。

2.为什么会有promise呢？

这是因为JavaScript是一门单线程的语言，不像Java等语言一样，是可以进行并发操作的多线程语言。JavaScript代码从上往下依次执行，同步代码会阻塞程序的执行(也就是必须等它执行完之后才能去执行下面的代码)，而异步代码不会阻塞程序的执行(会被放到任务队列中，比如定时器就是异步的，当时间满足要求就执行回调函数，或者是网络请求，请求和响应是需要时间的，所以异步代码的执行是需要消耗时间的)，所以需要有人来管理这些异步的任务，它就是promise。

3.promise的二个函数三种状态。

scss 复制代码

 1.两个函数：resolve()，reject()。
 2.三种状态pending(异步操作进行中)、fulfilled(异步操作已成功)、rejected(异步操作已失败)。

结合下面的代码，总结两个参数的作用：可以看出两个参数的作用，当异步操作成功时，调用resolve()函数传递成功的结果值，操作失败，调用reject()函数传递错误信息。

const 复制代码

  // 异步操作...
  if (/* 异步操作成功 */) {
    resolve(result); // 将结果传递给resolve函数
  } else {
    reject(error); // 将错误信息传递给reject函数
  }
});

promise
  .then(result => {
    // 处理异步操作成功的结果
  })
  .catch(error => {
    // 处理异步操作失败的结果
  });

rust 复制代码

promise的状态转变过程：
            当执行resolve函数，从pending->fulfilled，
            当执行reject函数，从pending->rejected你好

接着，我们通过调用 Promise 的then方法来设置异步操作成功时的回调函数，并通过catch方法来设置异步操作失败时的回调函数。then方法可以链式调用，每个then方法都返回一个新的 Promise 实例，因此可以实现连续的异步操作。

4.promise的高级用法：

1.Promise.all : Promise.all方法接收一个由 Promise 实例组成的数组作为参数，并返回一个新的 Promise 实例。该新的Promise实例的状态由这个数组中的所有的Promise实列的状态逻辑&决定(也就是只要有一个是rejected，则为rejected)，并将每个 Promise 实例的结果值组成一个数组传递给回调函数。

aP 复制代码

const promise1 = Promise.resolve('aaa');
const promise2 = Promise.resolve('bbb');
const promise3 = Promise.resolve(333);

Promise.all([promise1, promise2, promise3])
  .then(results {
    console.log(results); // ['aaa','bbb',333]
  });

总结一下：就是通过一个promise来管理一堆promise,只要有一个失败，哪怕其他的都成功了，新的promise的状态也是失败状态。

2.Promise.race : Promise.race方法同样接收一个由 Promise 实例组成的数组作为参数，并返回一个新的 Promise 实例。该新的 Promise 实例的状态由数组中第一个完成的Promise决定，并将这个Promise 实例的结果（或错误信息）传递给回调函数，可以通过下面的定时器案列来辅助理解。

javascript 复制代码

const promise1 = new Promise((resolve) => {
  setTimeout(() => resolve('Promise 1'), 2000);
});

const promise2 = new Promise((resolve) => {
  setTimeout(() => resolve('Promise 2'), 1000);
});

Promise.race([promise1, promise2])
  .then(result => {
    console.log(result); // Promise 2
  });

可以总结一下，Promise.race生成的新的promise的理解就是，我其实是想在一堆promise种找到执行速度最快的那一个，不管它是成功还是失败了，我想找的就是执行最快的那一个。所以这个可以用于一些对时间要求的场景，比如设置超时，并发请求等。

Promise.race应用场景

超时处理 ：用于设置请求超时。如果一个请求在规定时间内没有完成，可以使用 Promise.race 来处理超时。

javascript 复制代码

function fetchWithTimeout(url, timeout) {
    return Promise.race([
        fetch(url),
        new Promise((_, reject) =>
            setTimeout(() => reject(new Error('Timeout')), timeout)
        )
    ]);
}

并发请求 ：当需要并行处理多个请求，并希望第一个响应结果时，可以使用 Promise.race。

javascript 复制代码

const request1 = fetch('/api/data1');
const request2 = fetch('/api/data2');

Promise.race([request1, request2])
    .then(response => {
        // 处理第一个成功的请求
    })
    .catch(error => {
        // 处理错误
    });

竞赛条件：在某些情况下，可能希望在多个 Promise 之间进行"竞赛"，并使用最早完成的结果。

javascript 复制代码

const promise1 = new Promise(resolve => setTimeout(() => resolve('First'), 100));
const promise2 = new Promise(resolve => setTimeout(() => resolve('Second'), 200));

Promise.race([promise1, promise2]).then(result => {
    console.log(result); // 输出 'First'
});

优先级请求 ：如果有多个请求，需要按优先级处理，可以通过 Promise.race 来确保优先级高的请求先处理。
加载多个资源 ：在加载多个资源（如图片或数据）时，可以使用 Promise.race 来处理最先加载完成的资源。

总结

Promise.race 在处理异步操作时提供了灵活性，特别是在需要快速响应或处理超时的场景中，能够有效提高代码的可用性和响应速度。