首页
登录 | 注册

关于微信小程序中es6-promise的应用

关于JavaScript中es6-promise的应用

    • 应用promise背景
    • es6与Promise的关系
    • 了解主流浏览器对promise的兼容
    • 记录一些自己对promise的理解
    • 调用模型:
    • 异步函数顺序执行
    • 嵌套关系的promise,执行顺序
    • 链式调用中的then怎么中断

点此查看

阮一峰 promise入门,下面我就简单记录下简单入门和一些注意点。
  • 首先下载 es6-promise,放进微信小程序项目中。
  • 基本知识:
    (1) promiseg概念
    是异步编程的一种解决方案。
    从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。
    (2) Promise 的状态和特点
    Promise 异步操作有三种状态:pending(进行中)、fulfilled(已成功)和 rejected(已失败)。除了异步操作的结果,任何其他操作都无法改变这个状态。Promise 对象只有:从 pending 变为 fulfilled 和从 pending 变为 rejected 的状态改变。只要处于 fulfilled 和 rejected ,状态就不会再变了即 resolved(已定型)。
  • const p1 = new Promise(function(resolve,reject){
      resolve('success1');
      resolve('success2');
    });
     
    const p2 = new Promise(function(){
      resolve('success3');
      reject('reject');
    });
     
    p1.then(function(value){
      console.log(value); // 输出 success1
    });
    p2.then(function(value){
      console.log(value); // 输出 success3
    });
    

    (3) Promise 的 then 方法
    then 方法接收两个函数作为参数,第一个参数是 Promise 执行成功时的回调,第二个参数是 Promise 执行失败时的回调,两个函数只会有一个被调用。
    通过 .then 形式添加的回调函数,不论什么时候,都会被调用。

    const p = new Promise(function(resolve,reject){
      resolve('do_success');
      //reject('do_fail');
    });
     
    p.then( success => {
      console.log(success);
    }, fail => {
    	console.log(fail);
    }
    );
     
    console.log('first');
    // first
    // do_success
    

    (4) promise的链式执行顺序
    网上介绍的promise 的then方法为 同步还是异步函数的执行顺序,讲解的并不是很齐全,这边我整理了一下。

    (1)
    const p = new Promise(function(resolve,reject){
      setTimeout(
        console.log("first"), 3000  
        resolve(1); //必须加在异步执行结束之后
      );
      
    }).then(function(value){ // 第一个then // 1
      console.log(value); //第一个then里面的函数执行,必定是在p执行成功后才会执行。如果p执行失败(改为reject)会直接跳到catch
      return value * 2;
    }).then( value => { // 第二个then // 2
      console.log(value);
    }).then(function(value){ // 第三个then // undefined
      console.log(value);
      return Promise.resolve('resolve'); 
    }).then(function(value){ // 第四个then // resolve
      console.log(value);
      return Promise.reject('reject'); 
    }).then(function(value){ // 第五个then //不执行
      console.log('resolve:' + value);
    }).catch(function(value){ // catch // catch: reject
      console.log('catch:' + value);
    })
    
    (2) then 里面放 异步函数并不能让该异步函数顺序执行下来。
    异步函数里面经过promise封装,把resolve或reject 放在异步执行完后面,这样才能顺序执行下来。
    const p = new Promise(function(resolve,reject){
      setTimeout(function() {
        console.log('s1');
        resolve(1);  //需要放setTimeout里面这样才能顺序执行到 then
      }, 3000);
    }).then(function(value){
       setTimeout(function() {
        console.log('s2');
       }, 1000);      //s2并不会比s3早输出,需要经过封装
    }).then( value => { 
     setTimeout(function() {
        console.log('s3');
       }, 500);
    })
    
    执行结果
    > "s1"
    > "s3"
    > "s2"
    

    阮一峰 promise入门
    mozilla promise教学
    ES6 Promise 对象(推荐初学者看这个)
    setTimeout async promise执行顺序总结
    构建Promise队列实现异步函数顺序执行



    2020 jeepxie.net webmaster#jeepxie.net
    10 q. 0.008 s.
    京ICP备10005923号