Promise的实际使用场景

最新推荐文章于 2025-04-15 08:00:00 发布

weixin_46907830

最新推荐文章于 2025-04-15 08:00:00 发布

阅读量655

点赞数 9

文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_46907830/article/details/135674955

版权

本文介绍了Promise在JavaScript中的作用，包括解决异步问题、Promise的状态转换（pending,fulfilled,rejected）、Promise.all和Promise.race的用法，以及如何与async和await配合使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.promise是干嘛的？

简单一句话就是promise是用来解决异步的。js的执行顺序就是从上到下，先同步后异步

console.log('1')
setTimeout(()=>{
   console.log('2')
})
console.log('3')

//打印结果顺序是132

因为setTimeout是异步，所以会先打印3，如果我们想打印123，怎么办呢？那就把setTimeout变成同步不就可以了，这时候就可以用到promise了

2.Promise介绍

promise有三个状态

(1) pending 初始状态

(2) fulfilled 操作成功

(3) rejected 操作失败

状态改变只有两种可能

初始状态--->成功

初始状态--->失败

let p1 = new Promise((resolve, reject) => {
  if (成功) {
    resolve("success");
  } else {
    reject("fill");
  }
});
p1.then((data) => {
  console.log(data); //success
}).catch((data) => {
  console.log(data); //fill
});

Promise.all

Promise.all可以将多个Promise实例包装成一个新的Promise实例，成功的时候返回的是一个结果数组，失败返回最先被reject失败状态的值

let p1 = new Promise((resolve, reject) => {
  if (成功) {
    resolve("success1");
  } else {
    reject("fill1");
  }
});
let p2 = new Promise((resolve, reject) => {
  if (成功) {
    resolve("success2");
  } else {
    reject("fill2");
  }
});
let p3 = new Promise((resolve, reject) => {
  if (成功) {
    resolve("success3");
  } else {
    reject("fill3");
  }
});
Promise.all(p1, p2, p3)
  .then((data) => {
    console.log(data); //[success1,success2,success3]
  })
  .catch((error) => {
    console.log(error);
  });

Promise.race

Promise.race是赛跑的意思，Promise.race(p=[p1,p2,p3])里面哪个结果获得最快，就返回那个结果

Promise.race(p1, p2, p3)
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.log(error);
  });

3.Promise使用场景

function getData() {
  //异步
  setTimeout(() => {
    return "结果";
  });
}
function test() {
  const resultData = getData();
  console.log(resultData);//undefind
}
test();

因为setTimeout是异步的，所以resultData还没拿到值，就先打印了

用promise解决就是

function getData() {
  //异步
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("结果");
    });
  });
}
async function test() {
  getData().then(data=>{
    console.log('结果');
    
})
}
test();

promise可以和async和await搭配使用

function getData() {
  //异步
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("结果");
    });
  });
}
async function test() {
  const resultData =await getData();
  console.log(resultData);//undefind
}
test();