Promise学习笔记

Promise对象

Promise 表示一个异步操作的最终结果，与之进行交互的方式主要是 then 方法，该方法注册了两个回调函数，用于接收 promise 的终值或本 promise 不能执行的原因。

Promise 的状态

一个 Promise 的当前状态必须为以下三种状态中的一种：等待态（Pending）、执行态（Fulfilled）和拒绝态（Rejected）。

• 异步操作未完成（pending）
• 异步操作成功（fulfilled）
• 异步操作失败（rejected）

基本用法

Promise是一个构造函数，Promise接收一个参数，这个参数是函数，同时这个参数函数要传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。

Promise对象上有then、catch等方法

var getAjax = function (url) {
    const promise=new Promise(function(resolve,reject){
    var xhr=new XMLHttpRequest()
    xhr.onreadystatechange=function(){
        if(xhr.readyState!==4){
            return
        }
        if(xhr.status===200){
            resolve('成功时调用resolve函数，并返回一个Promise对象')
        }else{
            reject(new Error(xhr.statusText))
        }
    }
    xhr.open('GET',url)
    xhr.send()
    })
    return promise//返回promise对象
}
getAjax('./ajax.html')
    .then((data)=>{
            console.log('第一个参数: '+ data)//打印resolve函数传递的参数
            return ('第一个then的第一个参数')//返回一个Promise对象并将数据传递给下一个then
        },(data)=>{
            console.log('第二个参数: '+ data)//打印reject函数传递的参数
            return('第一个then的第二个参数')//返回一个Promise对象并将数据传递给下一个then
            }
        )
    .then((data)=>{
        //如果刚开始在getAjax函数中是调用reject函数，第一个then方法才会执行第二个参数，但是后面的then方法只执行第一个参数
            console.log('第一个参数: '+ data)//打印上一个then方法传递的参数
            return ('第二个then的第一个参数')
        },(data)=>{
            console.log('第二个参数: '+ data)
            return ('第二个then的第二个参数')
        }
    )
    .then((data)=>{
            console.log('第一个参数: '+ data)
        },(data)=>{
            console.log('第二个参数: '+ data)
        }
    )

异步操作成功时调用resolve:

异步操作失败时调用reject:

总结：

• Promise是一个构造函数，通过new命令创建promise对象。在创建对象的时候传递一个参数，这个参数是一个函数，这个函数有两个参数，这两个参数分别是resolve和reject，它们是两个函数，由 JavaScript 引擎提供，不用自己实现。成功时调用resolve方法，失败时调用reject方法。
• 在promise对象上有then方法，这个方法可以传递两个参数，这两个参数是函数。
• 如果调用resolve函数，就会调用then方法的第一个参数。如果调用的是reject函数，就会调用then方法的第二个参数。不管第一个then调用第一个参数还是第二个参数，第一个then方法后面的then方法都会执行第一个参数。
• resolve方法和reject方法需要带参数，这个参数会传递给then方法对应的参数 。在then方法中返回数据时，可以传递给下一个then方法。