promise基础

概述

Promise是异步编程的一种解决方案，从语法上讲，Promise是一个对象，从它可以获取异步操作的消息

使用Promise主要有以下好处：

• 可以避免多层异步调用嵌套问题（回调地狱）
• Promise对象提供了简洁的API,使得控制异步操作更加容易

promise的基本用法

实例化Promise对象，构造函数中传递函数，该函数中用于处理异步任务

resolve和reject两个参数用于处理成功和失败两种情况，并通过.then获取处理结果

new Promise(
  function (resolve, reject) {
    // 一段耗时的异步操作
    resolve('成功') // 数据处理完成
    // reject('失败') // 数据处理出错
  }
).then(
  (res) => {console.log(res)},  // 成功
  (err) => {console.log(err)} // 失败
)

• promise 就是一个语法

• 我们的每一个异步事件，在执行的时候都会有三个状态，执行中 / 成功 / 失败

• resolve作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；

• reject作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

• promise有三个状态：

1. pending[待定]初始状态

2. fulfilled[实现]操作成功

3. rejected[被否决]操作失败

   当promise状态发生改变，就会触发then()里的响应函数处理后续步骤；

   promise状态一经改变，不会再变。

• Promise对象的状态改变，只有两种可能：

  从pending变为fulfilled

  从pending变为rejected。

  这两种情况只要发生，状态就凝固了，不会再变了。

基于promise处理ajax请求

function  queryData(){
    return new Promise(function(resolve,reject){
        var xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function(){
            if(xhr.readyState !=4) return;
            if(xhr.status==200){
                resolve(xhr.responseText)
            }else{
                reject('出错了')
            }
        }
        xhr.open('get','/data');
        xhr.send(null);
    })
}

多次发送ajax请求

queryData()
    .then(function(data){
        return queryData();
    })
     .then(function(data){
        return queryData();
    })
     .then(function(data){
        return queryData();
    });

then参数中函数返回值

1. 返回Promise实例对象

   返回的该实例对象会调用下一个then

2. 返回普通值

   返回的普通值会传递给下一个then，通过then参数中函数的参数接收该值

promise常用的API

1. 实例方法

   p.then() 得到异步任务的正确结果

   p.catch() 获取异常信息

   p.finally() 成功与否都会执行（尚且不是正式标准）

    queryData()
        .then(function(data){
        console.log(data);
    	 })
        .catch(function(data){
        console.log(data);
    	 })
        .finally(function(data){
        console.log('finished');
    	 });
   

2. 对象方法

Promise.all()并发处理多个异步任务，所有任务都执行完成才能得到结果

Promise.race()并发处理多个异步任务，只要有一个任务完成就能得到结果

Promise.all([p1,p2,p3]).then((result)=>{
    console.log(result)
})
 Promise.race([p1,p2,p3]).then((result)=>{
    console.log(result)
})