Promise的基本用法

前言:promise意思是承诺的意思,在js中主要是为了解决回调地狱.

比如,我们要想在家吃顿饭，是要经过三个步骤的:
1.洗菜做饭。
2.坐下来吃饭。
3.收拾桌子洗碗。

上面三种过程用三个函数来表示如下:

state=1 ;// 我们先定义成功的状态为1
// 第一步: 1.洗菜做饭。
function step1(resolve,reject){
    console.log("1.开始洗衣做饭");
    
 if(state==1){
    resolve("洗菜做饭--完成");

 }else {
     reject("洗菜做饭--失败")
 }
}
// 第二步: 2.坐下来吃饭
function step2(resolve,reject){
    console.log("2.开始坐下来吃饭");
    
 if(state==1){
    resolve("坐下来吃饭--完成");

 }else {
     reject("坐下来吃饭--失败")
 }
}
// 第三步:3.收拾桌子洗碗。
function step3(resolve,reject){
    console.log("3.开始收拾桌子洗碗。");
    
 if(state==1){
    resolve("收拾桌子洗碗--完成");

 }else {
     reject("收拾桌子洗碗--失败")
 }
}

接着,我们分别用promise对象按顺序一步步来完成上面的操作:
1.Promise对象传入的是一个函数,三个步骤分别用三个then来表示,它会按一个个then往下执行,如果前面的then有错就不会继续往下一个then执行,大的结构如下:

//Promise对象传入的是一个函数,三个步骤分别用三个then来表示
new Promise(step1).then().then().then()

2.在第一个then()里,也是传入一个函数,这个函数里有一个参数(自定义名val),这个val值就是step1中resolve里面的内容,然后继续return一个Promise对象,在新的Promise对象里继续传入step2这个函数.

//Promise对象传入的是一个函数,三个步骤分别用三个then来表示
new Promise(step1).then(function(val){
    console.log(val);//打印"收拾桌子洗碗--完成"
    return new Promise(step2)//继续返回一个Promise对象
    
}).then().then()

3.第二个then和第一个then思路相同

  //Promise对象传入的是一个函数,三个步骤分别用三个then来表示
  new Promise(step1)
    .then(function(val) {
      console.log(val) //打印"洗菜做饭--完成"
      return new Promise(step2) //继续返回一个Promise对象
    })
    .then(function(val) {
      console.log(val) //打印"收拾桌子洗碗--完成"
      return new Promise(step3) //继续返回一个Promise对象
    })
    .then()

4.在第三个then中因为不用继续下一个步骤,不用再返回Promise对象就可以了.

  //Promise对象传入的是一个函数,三个步骤分别用三个then来表示
  new Promise(step1)
    .then(function(val) {
      console.log(val) //打印"洗菜做饭--完成"
      return new Promise(step2) //继续返回一个Promise对象
    })
    .then(function(val) {
      console.log(val) //打印"收拾桌子洗碗--完成"
      return new Promise(step3) //继续返回一个Promise对象
    })
    .then(function(val){
        console.log(val);//"收拾桌子洗碗--完成"
    })

上面结果:
Promise的基本用法
假设,第二步state状态改为2,则会报错

// 第二步: 2.坐下来吃饭
function step2(resolve,reject){
    console.log("2.开始坐下来吃饭");
    state =2;
 if(state==1){
    resolve("坐下来吃饭--完成");

 }else {
     reject("坐下来吃饭--失败")
 }
}

报错如下:
Promise的基本用法
最后附上完整的代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body></body>
</html>
<script>
  // promise意思是承诺的意思,在js中主要是为了解决回调地狱.
  /*比如,我们要想在家吃顿饭，是要经过三个步骤的:
   1.洗菜做饭。
   2.坐下来吃饭。
   3.收拾桌子洗碗。
  */
  state = 1 // 我们定义一个成功的状态
  // 第一步: 1.洗菜做饭。
  function step1(resolve, reject) {
    console.log('1.开始洗衣做饭')
    if (state == 1) {
      resolve('洗菜做饭--完成')
    } else {
      reject('洗菜做饭--失败')
    }
  }
  // 第二步: 2.坐下来吃饭
  function step2(resolve, reject) {
    console.log('2.开始坐下来吃饭')
    if (state == 1) {
      resolve('坐下来吃饭--完成')
    } else {
      reject('坐下来吃饭--失败')
    }
  }
  // 第三步:3.收拾桌子洗碗。
  function step3(resolve, reject) {
    console.log('3.开始收拾桌子洗碗。')
    if (state == 1) {
      resolve('收拾桌子洗碗--完成')
    } else {
      reject('收拾桌子洗碗--失败')
    }
  }
  //Promise对象传入的是一个函数,三个步骤分别用三个then来表示
  new Promise(step1)
    .then(function(val) {
      console.log(val) //打印"洗菜做饭--完成"
      return new Promise(step2) //继续返回一个Promise对象
    })
    .then(function(val) {
      console.log(val) //打印"收拾桌子洗碗--完成"
      return new Promise(step3) //继续返回一个Promise对象
    })
    .then(function(val){
        console.log(val);//"收拾桌子洗碗--完成"
    })
</script>

实际应用场景:比如我们在注册页面的时候,就用到了Promise对象,我们第一步发送请求去验证用户名是否已经注册,验证完用户名没有被注册后再进行第二步验证手机动态码,手机动态验证码正确了,然后再进行第三步把注册的信息写入数据库当中.

前言:promise意思是承诺的意思,在js中主要是为了解决回调地狱.

相关推荐