1. promise作用:

 promise:解决异步回调的问题

2. 目的:

 创建异步对象,当异步对象中的异步操作执行完成之后,再执行想要执行的东西。

  •   resolve表示将状态变成成功完成,reject表示将状态变成失败完成
  •   当resolve方法执行完成之后,再执行then方法
   let p = new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('执行完毕');
            resolve();
            // 表示完成
        }, 3000)
    })
    p.then(() => {
        console.log('promise异步操作完成了');
    })

 3. Promise传参

resolve里的参数可以传给then

    let p = new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log("执行完毕");
            resolve(3)
        }, 1000);
    })
    p.then((d) => {
        console.log("接收到resolve传递的参数:", d);
    })

4. promise错误处理

reject中存储错误的参数,可以传给then方法中的第二个参数

    let p = new Promise((resolve, reject) => {
        setTimeout(() => {
            // resolve(3) //执行成功传递的参数
            reject('404') //执行失败传递的参数
        }, 1000);
    })
    p.then((res) => {
        console.log("接收成功传递的参数", res); //没有resolve,不会经过这里
    }, (err) => {
        console.log('接收执行失败传递的参数:', err);
    })

 

5. promise对象的then方法 和catch方法

  • Promise对象的then方法有两个参数,一个是成功后的参数,另一个是失败的参数方法
 let a = 1;
    let promise = new Promise(function (resolve, reject) {
        if (a == 10) {
            resolve('成功')
        } else {
            reject("失败")
        }
     })
    //   promise.then(success,fail)
    promise.then(res => {
        console.log("成功调用", res);
    }, err => {
        console.log("失败调用", err);
    })
  • new Promise().catch() ————> 错误捕获
    promise.then(res => {
        console.log(res); // resolve
    }).catch(err => {
        console.log(err); // 等同于接受 上面的reject返回的失败
    })

 

6.Promise的方法

  •  promise.resolve("成功"),将现有的东西,转成一个Promise对象,且是resolve成功状态
    let p1 = Promise.resolve('123');
    p1.then(res => {
        console.log(res);
    })
  • promise.reject('失败'),将现有的东西,转成一个promise对象,且是reject失败状态
    let p2 = Promise.reject('456');
    p2.catch(err => {
        console.log(err);
    })
  • Promise.race():与Promise.all() 的不同之处在于,它将与第一个传递的promise相同的完成方式被完成。他可以是resolves,也可以使rejects,这要取决于第一个完成的方式是两个中的哪个。 
    // 如果传的跌代是空的,则返回的 promise将永远等待。
    // 如果迭代包含一个或多个非承诺值和/或已解决/拒绝的承诺,则Promise.race将解析成为迭代中找到的第一个值。
    let p1 = Promise.reject('aaa')
    let p2 = Promise.reject('bbb')
    let p3 = Promise.reject('ccc')
    Promise.race([p1, p2, p3]).then(res => {
        console.log(res);
    }).catch(err => {
        console.log(err); //输出aaa
    })
  • Promise.all() ————> 一个脚本中有多个promise时,监控多个Promise对象
//   promise.all([p1,p2,p3]):把promise打包,扔到一个数组里面,打包完还是一个promise对象
    let p1 = new Promise((resolve, reject) => {
        let time = Math.random() * 4000 + 1000;
        setTimeout(() => {
            console.log('P1完成');
            resolve();
        }, time)
    })
    let p2 = new Promise((resolve, reject) => {
        let time = Math.random() * 4000 + 1000;
        setTimeout(() => {
            console.log('p2完成');
            resolve()
        }, time);
    })
    let p3 = new Promise((resolve, reject) => {
        let time = Math.random() * 4000 + 1000;
        setTimeout(() => {
            console.log('p3完成');
            reject()
        }, time);
    })
    // 必须确保所有Promise 对象都是resolve状态
    let p = Promise.all([p1, p2])
    p.then(() => {
        // p1 和 p2 全部执行完毕后,才会执行then方法里面的操作
        console.log('全部执行完成');
    })

7. 案例:用户登录成功后再获取用户信息

 let status = 1;
    let userLogin = (resolve, reject) => {
        setTimeout(() => {
            if (status == 1) {
                resolve({
                    data: '登陆成功',
                    msg: 'xxxx',
                    token: "xxsdasdfsa"
                })
            } else {
                reject("失败了")
            }
        }, 2000);
    }

    let getUserInfo = (resolve, reject) => {
        setTimeout(() => {
            if (status == 1) {
                resolve({
                    data: "获取用户信息成功",
                    msg: "cdcdcd",
                    token: "sndishishdissdsmmsadf"
                })
            } else {
                reject('失败了')
            }
        }, 1000);
    }
    new Promise(userLogin).then(res => {
        console.log("用户登录成功");
        return new Promise(getUserInfo)
    }).then(res => {
        console.log('获取用户信息成功');
        console.log(res);
    })

 

 

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐