Promise用错会怎样？

2024-02-08 03:14:19

Promise用错的常见问题

1. 把resolve和reject当作return使用

function getSomething() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('something');
    }, 1000);
  });
}

getSomething().then(result => {
  console.log(result); // something
});

上面的代码中，getSomething()函数返回了一个Promise对象。然而，在函数体中，我们却把resolve()当作return使用了。这样会导致Promise对象立即解析，并且then()回调函数永远不会被调用。

正确的做法是，在setTimeout()回调函数中调用resolve()或reject()。这样，Promise对象才会在异步操作完成后解析或拒绝。

function getSomething() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('something');
    }, 1000);
  });
}

getSomething().then(result => {
  console.log(result); // something
});

2. 不处理Promise的拒绝情况

function getSomething() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject('something went wrong');
    }, 1000);
  });
}

getSomething().then(result => {
  console.log(result);
});

上面的代码中，getSomething()函数返回了一个Promise对象。然而，我们却忘记处理Promise的拒绝情况。这样会导致Promise对象在拒绝后，then()回调函数永远不会被调用。

正确的做法是，在then()回调函数中使用catch()方法来处理Promise的拒绝情况。

function getSomething() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject('something went wrong');
    }, 1000);
  });
}

getSomething().then(result => {
  console.log(result);
}).catch(error => {
  console.log(error); // something went wrong
});

3. 使用Promise.all()处理不相关的Promise对象

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('promise1');
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('promise2');
  }, 2000);
});

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('promise3');
  }, 3000);
});

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

上面的代码中，我们使用Promise.all()来处理三个不相关的Promise对象。这样会导致Promise.all()等待所有三个Promise对象都解析后，才调用then()回调函数。然而，如果我们只需要其中一个Promise对象解析，就可以使用Promise.race()。

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('promise1');
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('promise2');
  }, 2000);
});

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('promise3');
  }, 3000);
});

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