ES6 promise 常用方法介绍

Posted 2020-11-06 佑之以航

一：promise 知识点：.then() catch() resolve()返回成功的值 reject（）返回失败的值

用法：连续调用上次请求值做下一步操作

写法：

1. 在第一步方法里面new 一个Promsie方法 用变量接收 传入值 function(resolve, reject){}

2. 在传值函数里面执行请求或者得值操作,然后用相应的方法返回值 //resolve()返回成功的值 reject（）返回失败的值

3. 在第一步方法最后返回定义的变量

用法:

1. 利用第一步方法.then 并传值function(data){}

2. 其中data就是第一个函数请求来的值

3. 如需继续进行其余请求方法 可以继续return 其余方法（其余方法定义同一方法定义步骤）

示例：

   1. function aa(){
    var p = new Promise(function(resovle, reject){
      //做一些请求值的异步操作，例如：
      setTimeout(function(){
          var num = Math.ceil(Math.random()*10); //比如这是请求来的值
              if(num<=5){ //满足条件
                  resolve(num);
              }else{ //不满足条件
                  reject('数字太大了');
             }
      })
       })
    return p;
     }

   2. aa().then(function(data){
    //这里的data就是aa()方法得出数据
    return 接下来的方法
      }).catch(function(reason){
    //这里是抛出异常后执行的函数,这里reason就是抛出异常的提示信息
      })

二：promise 知识点 all()：将加入all方法的所有promise对象返回的值归集到 then方法里面统一展现

2. 示例：

   Promise.all([aa(), bb(), cc()])
   .then(function(resulte){
    //这里的resulte是包含了aa(), bb(), cc()返回值的一个数组
   })

三： promise 知识点 race(): 返回放入race方法里面执行最快的方法的值,可以用于给某个方法加入请求用时

3. 示例：

如果aa()方法是某个请求方法
bb()方法用于延时提示出某个信息

   function aa() {
     var p = new Promise(function(resolve, reject){
        var img = new Image();
        img.onload = function(){
            resolve(img);
        }
        img.src = 'xxxxxx';
     });
     return p;
   }

   function bb() {
     var p = new Promise(function(resolve, reject){
        setTimeout(function(){
            reject('图片请求超时');
        }, 5000);
     });
     return p;
   }

   Promise.race([aa(), bb()])
   .then(fucntion(resulte){
     //这里是返回aa()方法的值
   })
   .catch(function(reason){
     //这里返回的是bb()方法的值
   })