填坑-十万个为什么？（18）

代码牛
468 阅读4分钟

简介:很多概念不清或忘记，重新构建自己的知识体系。每天问自己1~多个问题。我是菜鸟 成为大神之路!

1.学习Promise？

  • Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及其返回的值。
  • 每一个异步任务立刻返回一个Promise对象，由于是立刻返回，所以可以采用同步操作的流程。这个Promises对象有一个then方法，允许指定回调函数，在异步任务完成后调用。

异步操作:此内容在第 19 天进行讲解。

①传统的多层嵌套回调函数的写法？
//例：依次执行step1,step2,step3,step4
step1(function (value1) {
    step2(value1, function(value2) {
        step3(value2, function(value3) {
            step4(value3, function(value4) {
                // Do something with value4
            });
        });
    });
});

// Promises的写法
(new Promise(step1))
  .then(step2)
  .then(step3)
  .then(step4);

传统的回调函数写法使得代码混成一团，变得横向发展而不是向下发展

②Promise的语法？
new Promise( function(resolve, reject) {...} /* executor */  );
  • Promise构造函数执行时立即调用executor 函数， resolve 和 reject 两个函数作为参数传递给executor（executor函数在Promise构造函数返回新建对象前被调用）。
  • resolve和reject 函数被调用时，分别将promise的状态改为resolve -> fulfilled（完成）或reject -> rejected（失败）
`例子1`
  function asyncPro(msg){
        return new Promise(function (resolve,reject) {
            console.log(msg+'：promise准备阶段');
            resolve(msg+'成功！');//任务成功时被调用
            reject(msg+"失败！");//任务失败时被调用
        });
    }
    asyncPro('第一步').then(function (msg) {
        console.log(msg);
        return asyncPro('第二步');
    }).then(function (msg) {
        console.log(msg);
        return asyncPro('第三步');
    }).then(function(msg){
        console.log(msg);
    });

`打印结果：`
    第一步：promise准备阶段
    第一步成功！
    第二步：promise准备阶段
    第二步成功！
    第三步：promise准备阶段
    第三步成功！
    
    
`例子2`
let prom = new Promise(function (resolve, reject) {
      console.log('：promise准备阶段');
      let num = 0;
      resolve(num+1);//任务成功时被调用
      reject("失败！");//任务失败时被调用
    });

prom.then(function (msg) {
      console.log(msg);
      return msg+1;
    }).then(function (msg) {
      console.log(msg);
      return msg+1;
    }).then(function (msg) {
      console.log(msg);
    });

`打印结果`
    ：promise准备阶段 
    1
    2
    3
③ Promise.prototype.then()方法参数 和 返回对象
  • then(onFulfilled, onRejected)方法返回一个Promise。它最多需要有两个参数：Promise 的成功和失败情况的回调函数。
  • onFulfilled
    当Promise变成接受状态（fulfillment）时，该参数作为回调函数被调用。该函数有一个参数，即接受的最终结果（the fulfillment value）。如果传入的 onFulfilled参数类型不是函数，则会在内部被替换为(x) => x，即原样返回 promise 最终结果的函数
  • onRejected
    当Promise变成拒绝状态（rejection ）时，该参数作为回调函数被调用。该函数有一个参数，即拒绝的原因（the rejection reason）。
let p1 = new Promise(function(resolve, reject) {
  resolve("Success!");
  // or
  // reject ("Error!");
});

p1.then(function(value) {
      console.log(value); // Success!
    }, function(reason) {
      console.log(reason); // Error!
    });

then()方法返回一个Promise，而它的行为与then中的回调函数的返回值有关：

  • 如果then中的回调函数返回一个值，那么then返回的Promise将会成为接受状态，并且将返回的值作为接受状态的回调函数的参数值。
  • 如果then中的回调函数抛出一个错误，那么then返回的Promise将会成为拒绝状态，并且将抛出的错误作为拒绝状态的回调函数的参数值。
  • 如果then中的回调函数返回一个已经是接受状态的Promise，那么then返回的Promise也会成为接受状态，并且将那个Promise的接受状态的回调函数的参数值作为该被返回的Promise的接受状态回调函数的参数值。
  • 如果then中的回调函数返回一个已经是拒绝状态的Promise，那么then返回的Promise也会成为拒绝状态，并且将那个Promise的拒绝状态的回调函数的参数值作为该被返回的Promise的拒绝状态回调函数的参数值。
  • 如果then中的回调函数返回一个未定状态（pending）的Promise，那么then返回Promise的状态也是未定的，并且它的终态与那个Promise的终态相同；同时，它变为终态时调用的回调函数参数与那个Promise变为终态时的回调函数的参数是相同的。
④ Promise.prototype.catch()

方法返回一个Promise，并且处理拒绝的情况。它的行为与调用Promise.prototype.then(undefined, onRejected)相同。

p.catch(function(reason) {
    //reason rejection 的原因。
   // rejection 拒绝
});

参考文章：
①github.com/kriskowal/q
②码农之家/promise用法
③mozilla Promise

avatar
文章
阅读
粉丝