Promise异步操作

Promise是es6中新增加的类(new Promise),目的为了管理JS中异步编程,也叫“Promise”设计模式

Promise用来解决异步问题。本身是同步的,只是用来管理异步编程的一种模式

所谓Promise,简单说就是一个容器(壳子),里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果

promise对象是一个构造函数,本身有resolve、reject、all方法,原型上有then、catch等方法

 

三种状态

  • pending 准备状态
  • fulfilled 成功状态(resolve)
  • rejected 失败状态(reject)

最终只有两个状态,1、准备 2、成功或者失败

 

   let p = new Promise((resolve,reject)=>{
        setTimeout(function(){
            let txt = '呼伦贝尔';
            resolve(txt)//resolve时候执行成功的 呼伦贝尔
            //reject(err)  //reject时候执行失败的 err
        },1000)
   });
   p.then((data)=>{
       console.log(data);
   },(err)=>{
       console.log('err')
   })
   /*
    1、异步操作放在Promise传的函数里面
    2、Promise的参数与 then的参数相对应
  */

 

Promise对象的特点

  1. Promise对象的状态不受外界影响。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态
  2. 一旦状态改变,就不会再变。Promise对象的状态改变,只有两种可能:从pending变为fulfilled和从pending变为rejected

 

promise中excutor执行器,默认new时候会立即调用

每一个promise的实例上都有一个then方法,用来指定resolved和rejected状态的回调函数

其中then方法可以写多个链式调用(前提需要保证执行完then返回的依然是promise实例)

 

    let pro = new Promise((resolve,reject) =>{
    //执行一个异步操作
    let xhr = new XMLHttpRequset();
    xhr.open('get','1.js',true);
    xhr.onreadyStatechange() = function(){
        if(xhr.readyState === 4 && xhr.status === 200){
            val = xhr.responseText;
            resolve(val);//成功
        }
        if(xhr.status!==200){
            reject();//失败
        }
    }
    xhr.send();
})
pro.then((resolve)=>{
    console.log('ok');
    //数据绑定
},(reject)=>{
    console.log('error');
}).then(()=>{
    //当第一个then中的函数执行完,会执行第二个
}).then(()=>{
     //当第二个then中的函数执行完,会执行第三个
})

 

promise支持多个并发的请求,获取并发中的数据

Promise请求过来的数据,可能是null,也可能是数组,是数组就进then()遍历,返回的null不需要then()

 

promise.prototype.catch()

该方法是.then(null, rejection)的别名,用于指定发生错误时的回调函数

 getJSON('/bosh.json').then(function(bosh){
    //...
  }).catch(function(err){
    // 处理 getJSON 和 前一个回调函数运行时发生的错误
     console.log('发生错误!', error);
  })

一般来说,不要在then方法里面定义reject 状态的回调函数(即then的第二个参数)

也就是在then里面执行成功信息,在catch里面执行错误信息

  // 不推荐
  promise
    .then(function(data) {
      // success
    }, function(err) {
      // error
    });

  // 推荐
  promise
    .then(function(data) { //cb
      // success
    })
    .catch(function(err) {
      // error
    });

 

promise.all

Promise.all方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。返回的每个成员都是 Promise 实例

等待所有的promise都成功执行then,反之只要有一个失败就会执行catch

Promise.all([p1,...]).then();

 

posted @ 2019-03-27 22:39  紫诺花开  阅读(739)  评论(0编辑  收藏  举报