关于 promise

Promise: 承诺，许诺

作用: 解决异步回调问题

关于 Promise 具体描述:
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理
和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供
了 Promise 对象。
所谓 Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是
一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消
息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。Promise 实例生成以后，可以用 then 方法分别指定resolve状态和 rejecte 状态的回调函数。resolve 函数的作用是，将 Promise 对象的状态从“未完成”变为“成功”（即从pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject 函数的作用是，将 Promise 对象的状态从“未完成”变为“失败”（即从pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。then 方法可以接受两个回调函数作为参数。第一个回调函数是 Promise 对象的状态变为 resolved 时调用，第二个回调函数是 Promise 对象的状态变为 rejected 时调用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受 Promise 对象传出的值作为参数。

1.基本语法

let promise = new Promise(function(resolve, reject){ if ( /* 异步操作成功 */ ){
 resolve(value); //成功操作
 } else {
 reject(error); //失败操作
 }
});

promise.then(function(value) {
 // success
}, function(error) {
// failure
});

2.语法演示

let a=10;
    //01 记录状态
    let promise = new Promise(function(resolve,reject){
           if(a == 10){
            resolve('成功')
           }else{
            reject('失败')
           }
    });

    //02 根据状态输出
    promise.then(resolve=>{
        console.log("成功")
    },reject=>{
        console.log("失败")
    })

箭头函数的形式为

 promise.then(res=>{
//成功调用
 }, err=>{
//失败调用
 })

3.resolve单向输出

	var p = new Promise(function(resolve,reject){
            var timer = setTimeout(function(){
                resolve('数据加载成功！')
            },3000);
        })
        p.then(res=>{
            console.log(res)
        })

4.reject单向输出

 var p = new Promise(function (resolve, reject) {
            var timer = setTimeout(function () {
                reject('数据加载失败！')
            }, 3000);
        })
        p.then(res => {
            console.log(res)
        }, rej => {
            console.log(rej)
        })

5.catch错误捕捉:

promise.then(res=>{
 //成功调用 }).catch(err=>{
 //失败调用
 })

 let a= 1;
        let promise =  new Promise(function(resolve,reject){
            if(a ==10){
                resolve('成功')
            }else{
                reject('失败')
            }
        })
        promise.then(res => {
            console.log(res)
        }, rej => {
            console.log(rej)
        }).catch(err=>{
            console.log(err)
        })

 var p = new Promise(function (resolve, reject) {
            var flag = false;
            if (flag) {
                resolve('这是数据1')
            } else {
                reject('这是数据2')
            }
        })
        p.then(res => {
            console.log(' 这是成功操作')

        }).catch(rej => {
            console.log('这是成功操作')
        })

6.promise解决复杂问题

ES5 方法

 setTimeout(function () {
            console.log('我')
            setTimeout(function () {
                console.log('爱')
                setTimeout(function () {
                    console.log('鸡')
                    setTimeout(function () {
                        console.log('腿')
                    }, 1000)
                }, 1000)
            }, 1000)
        }, 1000)

ES6 方法
promise.then()的链式操作的好处:防止数据阻塞

 function getStr1(){
        return new Promise(function(resolve,reject){
            setTimeout(function(){
                resolve('我')
            },1000)
        })
       }
       function getStr2(){
        return new Promise(function(resolve,reject){
            setTimeout(function(){
                resolve('爱')
            },1000)
        })
       }
       function getStr3(){
        return new Promise(function(resolve,reject){
            setTimeout(function(){
                resolve('鸡')
            },1000)
        })
       }
       function getStr4(){
        return new Promise(function(resolve,reject){
            setTimeout(function(){
                resolve('腿')
            },1000)
        })
       }
       getStr1().then(res=>{//promise.then()的链式操作的好处:防止数据阻塞
        console.log(res)
        return getStr2()
       }).then(res=>{
        console.log(res)
        return getStr3()
       }).then(res=>{
        console.log(res)
        return getStr4()
       }).then(res=>{
        console.log(res)
       })

7.resolve only

resolve是Promise对象的方法，获取成功返回的数据并标记

        let p1 = Promise.resolve('数据获取成功');
        p1.then(res=>{
            console.log(res)
        })

8.reject only

 let p1 = Promise.reject('数据未加载成功');
        p1.then(res=>{
            console.log(res)
        }).catch(rej=>{
            console.log(rej)
        })

Promise.resolve(‘aa’) : 将现有的东西，转成一个 promise 对象， resolve 状态，成功状态
等价于:
new Promise(resolve =>{
resolve(‘aaa’)
});

Promise.reject(‘aaa’): 将现有的东西，转成一个 promise 对象，reject 状态，失败状态
等价于:
new Promise((resolve, reject) =>{
reject(‘aaa’)
});

9. Promise.all

Promise.all([p1, p2, p3]): 把 promise 打包，扔到一个数组里面，打包完还是一个promise 对象
必须确保，所有的 promise 对象，都是 resolve 状态，都是成功状态
Promise.race([p1, p2, p3]): 只要有一个成功，就返回

	 let p1 = Promise.resolve('aaa')
        let p2 = Promise.resolve('bbb')
        let p3 = Promise.resolve('ccc')
        Promise.all([p1,p2,p3]).then(res=>{//p1,p2,p3状态必须是resolve==>成功
            //console.log(...res);
            let[res1,res2,res3]=res;
            console.log(...res)
        })

10.模拟用户登录

let status = true;
        let userLogin = (resolve,reject)=>{
            setTimeout(()=>{
                if(status == true){
                    resolve({data:"登录成功",home:"",age:""})
                }else{
                    reject('失败了')
                }
            },2000)
        };
        let getUserInfo = (resolve,reject)=>{
            setTimeout(()=>{
                if(status == true){
                    resolve({data:"获取用户信息成功",home:"河南",age:"18"})
                }else{
                    reject('失败了')
                }
            },1000)
        }
        new Promise(userLogin).then(res=>{
            console.log('用户登录成功');
            return new Promise(getUserInfo)
        }).then(res=>{
            console.log('获取用户信息成功');
            console.log(res)
        })