欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

promise的基本使用和讲解

程序员文章站 2022-07-11 10:38:45
...
  1. Promise的基本使用!
 <script>
        var a = 10;
       let promise = new Promise(function(resolve,reject){
        if(a == 10){
            resolve('成功')   // 成功状态
        }else{
            reject('失败')    // 失败状态
        } 
       }) ;
       promise.then(res => {
           console.log(res)
       }).catch(err => {
           console.log(err);
       })
    
    </script>
  1. Promise 等价
<script>
     let p1 = Promise.resolve('我成功了');
     p1.then(res => {
         console.log(res);
     });
     // 上下俩者相等:
     let p2 = new Promise(resolve => {
        resolve('哦我也成功了')
     });
     p2.then(res => {
        console.log(res)
     })
</script>
  1. Promise 失败状态。
let cty = Promise.reject('失败了');
    cty.then(res => {
        console.log(res)
    }).catch(err => {
        console.log(err)
    })

4.批量执行 Promise.all() /// 里面的值,必须都得是成功状态/resolve, 如果是失败,则报错

let a1 = Promise.resolve('aaa');
    let a2 = Promise.resolve('sss');
    let a3 = Promise.resolve('ccc');

    Promise.all([a1,a2,a3]).then(res => {
        console.log(res)
      // 拆分数据
        let [res1, res2, res3] = res;
        console.log(res1, res2,res3)
    })

5.批量执行 Promise.race() /// 里面的值,只要有一个是成功状态/resolve, 就返回。 需要按照循序,如果第一个失败,后面都回停止执行。

let a11 = Promise.resolve('aaa');
    let a22 = Promise.reject('sss');
    let a33 = Promise.resolve('ccc');

    Promise.race([a11,a22,a33]).then(res => {
        console.log(res);
    })

6.Promise 处理接口模仿,回调里面调接口

 <script>
    /// 总接小案例
    var status = 1; 
    let userlogin = (resolve,reject) => {
        setTimeout(() => {
            if(status == 1){
                resolve({data:'登录成功',mag : '你要加油!',token:'fbabfa1231ada'})
            }else{
                reject('登录失败')
            }
        },2000)
    }
    let getUserInfo = (resolve,reject) => {
        setTimeout(() => {
            if(status == 1){
                resolve({data:'获取用户成功',mag : '你要加油!',token:'fbabfa1231ada'})
            }else{
                reject('获取失败')
            }
        },1000)
    }

    new Promise(userlogin).then(res => {
        console.log('用户登录成功');
        return new Promise(getUserInfo);
    }).then(res => {
        console.log('获取数据成功');
        console.log(res)
    })
    
    </script>

如果有问题,可以加我微信一起讨论,我们一起进步!
屏幕前的你,加油!

promise的基本使用和讲解

相关标签: promise基本使用