您现在的位置是:首页 >其他 >到底什么是JS的promise?网站首页其他

到底什么是JS的promise?

前端拂雨 2023-06-11 00:00:03
简介到底什么是JS的promise?

一、promise的作用

promise用于异步调用,当你需要使用异步嵌套的时候,可以使用promise去简化代码,而不是在ajax或者fetch请求中,再重复写多个请求甚至更多的嵌套异步请求。

二、promise的使用

在promise中可以传入一个函数,函数有两个参数,如下所示,函数可以写成function形式,也可以写成箭头函数,其中,你可以根据业务逻辑去选择执行resolve或者reject。

下方的案例是判断随机数是否大于50,如果大于50就执行resolve(),小于五十就执行reject();其中,两个方法都可以传递参数。在后面的then或者catch方法中可以去获取这里传递的参数。

const promise1 = () => new Promise((resolve, reject) => {
      let i = Math.ceil(Math.random() * 100);
      if (i > 50) {
         resolve("随机数大于50");
      } else {
         reject("随机数小于50");
      }
})

执行resolve时表示执行逻辑成功,会在后续中调用then方法,即调用实例的then方法,可在then方法中处理相应的逻辑。

执行reject时表示执行逻辑失败,会在后续中调用catch方法,即调用实例的catch方法,可在catch方法中处理相应的逻辑。

promise1().then((res) => {
    console.log(res);
}).catch((res) => {
    console.log(res);
});

三、promise如何嵌套调用多个异步方法

这里写了四个promise,可以分别在这些地方进行异步请求,然后调用第一个promise2的时候,在then方法中return另一个你想继续执行的一步请求,例如promise3,你就可以继续在后方写then方法,如下实例所示,

const promise2 = () => new Promise((resolve, reject) => {
      // 在此执行异步方法,例如ajax请求
      resolve(2);
})

const promise3 = () => new Promise((resolve, reject) => {
    // 在此执行异步方法,例如ajax请求
    resolve(3);
})

const promise4 = () => new Promise((resolve, reject) => {
    // 在此执行异步方法,例如ajax请求
    resolve(4);
})

const promise5 = () => new Promise((resolve, reject) => {
    // 在此执行异步方法,例如ajax请求
    resolve(5);
})

嵌套异步请求的实例,如下所示,

promise2().then(res => {
    console.log(res);
    return promise3();
}).then((res1) => {
    console.log(res1);
    return promise4();
}).then((res2) => {
    console.log(res2);
    return promise5();
}).then((res3) => {
    console.log(res3);
})

这样我们就完成了嵌套异步请求了。感谢观看,如有问题,欢迎指导,谢谢。

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。