异步: 异步Promise

跟es6 Promise相同的有 q.js、bluebird.js、jQuery deferred 3.0

js单线程 一段时间内只能做一件事

js跟浏览器交互->请求数据->等待->异步编程->回调函数

异步思想:

        setTimeout(function(){
    console.log(111)
},1000)           // 等待执行
console.log(222)  // 先执行

      

回调地域或回调金字塔: 后面的请求需要前面请求的数据。缺点: 难以管理(表面原因)

        setTimeout(function(){
    setTimeout(function(){
        setTimeout(function(){
            setTimeout(function(){
                console.log(111)
            },1000)
        },1000)
    },1000)
},1000)
console.log(222)

      

Promise: 管理回调函数的状态机

        const p = new Promise((resolved, rejected) => {
// new Promise创建一个Promise对象 Promise是构造函数 里面必须传一个函数 且该函数立即执行
    console.log(111)   // 立即执行 先打印
}
console.log(222)       // 后打印

      

promise有三个状态:

pending: new Promise的时候，该状态可以转以下两种状态

成功: resolved 可以传参 等于value

失败: rejected 可以传参 等于value 一般传错误信息 new Error

        const p = new Promise((resolved, rejected) => {
 // new Promise创建一个Promise对象 Promise是构造函数 里面必须传一个函数 且该函数立即执行
    setTimeout(function(){                 // 模拟异步 1s之后执行
        resolved(1000)                     // 成功时候调用的函数
        // rejected(new Error('出错了'))   // 失败时候调用的函数
    },1000)
})
 p.then(function(val){                 // p.then注册事件 pending状态 不执行任何函数 占位符
      console.log(val)                 // 成功状态执行的函数
},function(err){
     console.log(err)                  // 失败状态执行的函数
})

      

创建已处理的promise

        const p1 = Promise.resolve()
console.log(p1)                     // [[PromiseStatus]]: "resolved"
const p2 = Promise.reject('出错啦...')
console.log(p2)                     // [[PromiseStatus]]: "rejected"

      

链式调用promise: 解决回调金字塔

p.then返回一个新的promise，并且不等于p

return返回不是Promise对象是成功的resolved状态，

执行函数 返回Promise对象成功的也是成功的resolved状态，

返回Promise对象失败，执行失败函数rejected状态。

        const p = new Promise((resolved, rejected) => {
    setTimeout(function(){              // p.then下面执行成功或失败取决于这个函数
        resolved(1000)
        // rejected(new Error('出错了'))
    },1000)
})
p.then(function(val){                   // 成功执行的函数
    console.log(val)
    return new Promise((resolved,rejected) => {  // p的状态看return出来一个promise对象 如果成功下面的.then执行成功的,如果失败执行失败的
        setTimeout(() => {
            // resolved(111)
            rejected('失败')
        },2000)
    })
},function(err){                        // 失败执行的函数
    console.log(err)
}).then(function(){                     // p.then事件成功执行这个事件
    console.log('成功的')                                
},function(){                           // p.then事件失败执行这个事件
     console.log('失败的')
})

      

链式调用，封装函数

        function fakeAjax(ms, val){
    return new Promise((resolved, rejected) => {
        setTimeout(function(){      
            resolved(val)                      
            // rejected(new Error('出错了'))
        }, 1000)
    })
}

fakeAjax(1000, 10).then((val)=>{          // 第一次调用
    console.log(val)
    return fakeAjax(2000, 20)             // 返回Promise 二次请求
}, ()=>{}).then((val)=>{                  // 第二次调用
    console.log(val)
    return fakeAjax(3000, 30)             // 返回Promise 三次请求
}, ()=>{}).then((val)=>{                  // 第三次调用
    console.log(val)
}, ()=>{})

      

响应多个Promise对象

Promise.all 响应全部

        function fakeAjax(ms, val,flag){
    return new Promise((resolved, rejected) => {
        setTimeout(function(){      
            if(flag){
                resolved(val)                       // 成功时候调用的函数
            }else{
                rejected(val)                       // 失败时候调用的函数
            }
        }, ms)                                    // 请求1s之后返回结果
    })
}
let p1 = fakeAjax(1000, 10, true)
let p2 = fakeAjax(2000, 20, true)
let p3 = fakeAjax(1500, new Error('错误!'), false)
Promise.all([p1, p2, p3]).then(function(val){               // 以数组形式传参
    console.log(val)                                        // 全部成功走成功函数
},function(err){
    console.log(err)                                        // 包含失败走失败函数
})
      

Promise.race 响应最快的请求

        function fakeAjax(ms, val,flag){
    return new Promise((resolved, rejected) => {
        setTimeout(function(){      
            if(flag){
                resolved(val)                      
            }else{
                rejected(val)
            }
        }, ms)                                
    })
}
let p1 = fakeAjax(1000, 10, true)
let p2 = fakeAjax(2000, 20, true)
let p3 = fakeAjax(1500, new Error('错误!'), false)

Promise.race([p1, p2, p3]).then(function(val){              // 取决于最快那个响应，它成功则该调用成功,反之失败则失败
    console.log(val)                           
},function(err){
    console.log(err)                                         
})
      

失败函数其他写法 .catch

        Promise.race([p1, p2, p3]).then(function(val){
    console.log(val)                                       
},function(err){
    console.log(err)                                                       
})

 // 等价 
// Promise.race([p1, p2, p3]).then(function(val){
//     console.log(val)                                        
// }).catch(function(){
//     console.log(err) 
// }) 
 
// 等价
// Promise.race([p1, p2, p3]).then(function(val){
//     console.log(val)                                       
// }).then(null, function(err){
//     console.log(err) 
// }) 

      

总结：

1. new Promise构造一个Promise对象，要求必须传一个函数，这个函数是立即执行
2. 赋值给p, 此时的p是一个注册事件，状态是pending，可以转换为成功或失败状态
3. p.then中有两个函数，一个是成功的时候执行，一个是失败的时候执行，函数中成功和失败都可以传值
4. p.then返回不是Promise对象是成功的resolved，执行成功函数；

返回Promise对象成功的也是成功的resolved，执行成功函数；

返回Promise对象失败，执行失败函数rejected状态。