首页文章资源工具教程 栏目

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具，网友无需注册和下载安装即可使用

点击查看

ES6 Promise用法详解

更新日期: 2019-07-09阅读: 1.7k标签: es6

What is Promise?

Promise是一个构造函数，接受一个参数（Function），并且该参数接受两个参数resolve和reject（分别表示异步操作执行成功后的回调函数、执行失败后的回调函数）

var p = new Promise(function(resolve, reject){
    setTimeout(function(){
        console.log('执行完成');
        resolve('成功了！');
    }, 2000);
});

运行代码，2秒后输出“执行完成”。注意，这里只是new了一个对象，并没有调用它，所以我们用Promise时是包在一个函数中的，如下：

function runAsync(){
　　var p = new Promise(function(resolve, reject){
 　　setTimeout(function(){
        　　console.log('执行完成');
        　　resolve('成功了！');
    　　}, 2000);
　　});
　　return p;
}
runAsync();

 

Pormise的优势：

1. 解决回调函数层层嵌套的问题：

（1） 有时我们需要进行一些有依赖关系的异步操作，比如有多个请求，后一个请求需要上一次请求的返回结果，过去常规的做法是使用callback层层嵌套，这样的代码可读性和维护性都很差，比如：

firstAsync(function(data){
    //处理得到的 data 数据
    //....
    secondAsync(function(data2){
        //处理得到的 data2 数据
        //....
        thirdAsync(function(data3){
              //处理得到的 data3 数据
              //....
        });
    });
});

（2） 使用Promise的话，代码就会变得扁平化，可读性更高了。比如：

firstAsync()
.then(function(data){
    //处理得到的 data 数据
    //....
    return secondAsync();
})
.then(function(data2){
    //处理得到的 data2 数据
    //....
    return thirdAsync();
})
.then(function(data3){
    //处理得到的 data3 数据
    //....
});

 

2.  更好的进行错误捕捉：

（1） 使用callback嵌套，可能会造成无法捕捉异常、异常捕捉不可控等问题。比如：

function fetch(callback) {
    setTimeout(() => {
        throw Error('请求失败')
    }, 2000)
}
 
try {
    fetch(() => {
        console.log('请求处理') // 永远不会执行
    })
} catch (error) {
    console.log('触发异常', error) // 永远不会执行
}
 
// 程序崩溃
// Uncaught Error: 请求失败

（2） 使用Promise的话，通过reject方法吧Promise的状态置为rejected，这样我们就可以在then方法中捕捉到，并且执行“失败”情况的回调。比如：

function fetch(callback) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
             reject('请求失败');
        }, 2000)
    })
}
 
fetch()
.then(
    function(data){
        console.log('请求处理成功！');
        console.log(data);
    },
    function(reason, data){
        console.log('触发异常！');
        console.log(reason);
    }
);

同时，也可以在catch方法中处理reject回调。比如：

function fetch(callback) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
             reject('请求失败');
        }, 2000)
    })
}
 
fetch()
.then(
    function(data){
        console.log('请求处理成功！');
        console.log(data);
    }
)
.catch(function(reason){
    console.log('触发异常！');
    console.log(reason);
});

在上面的代码中我们用到了Promise的then、catch方法，下面我们再来介绍一下Promise中常用的一些方法。

then方法：

then方法就是将原来使用callback回调的写法分离出来，在异步操作完成之后，使用链式调用的方法执行回调函数。

then方法包含三个参数：

  • 成功回调
  • 失败回调
  • 前进回调（规范没有要求实现前进回调）

返回一个Promise对象，也可以直接返回一个数据。比如：

function runAsync1(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('异步任务1执行完成');
            resolve('成功了1');
        }, 1000);
    });
    return p;            
}

function runAsync2(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('异步任务2执行完成');
            resolve('成功了2');
        }, 2000);
    });
    return p;            
}

runAsync1()
.then(function(data){
    console.log(data);
    return runAsync2();
})
.then(function(data){
    console.log(data);
    return '直接返回数据';  //这里直接返回数据
})
.then(function(data){
    console.log(data);
});

/*
输出：
    异步任务1执行完成
    成功了1
    异步任务2执行完成
    成功了2
    直接返回数据
*/

 

resolve方法：

该方法把Promise的状态置为完成态（Resolved），这是then方法就能捕捉到变化，并执行“成功”回调的方法。比如：

//做饭
function cook(){
    console.log('开始做饭。');
    var p = new Promise(function(resolve, reject){        //做一些异步操作
        setTimeout(function(){
            console.log('做饭完毕！');
            resolve('鸡蛋炒饭');
        }, 1000);
    });
    return p;
}
 
//吃饭
function eat(data){
    console.log('开始吃饭：' + data);
    var p = new Promise(function(resolve, reject){        //做一些异步操作
        setTimeout(function(){
            console.log('吃饭完毕!');
            resolve('完成！');
        }, 2000);
    });
    return p;
}

使用then链式调用：

cook()
.then(function(data){
    return eat(data);
})
.then(function(data){
    console.log(data);
});

//可以简写
cook()
.then(eat)
.then(function(data){
    console.log(data);
});

/*
输出：
    开始做饭。
    做饭完毕！
    开始吃饭：鸡蛋炒饭
    吃饭完毕
    完成！
*/

 

reject方法：

该方法把Promise的状态置为已失败（rejected），then方法捕捉到变化，并执行“失败”回调的方法。比如：

//做饭
function cook(){
    console.log('开始做饭。');
    var p = new Promise(function(resolve, reject){        //做一些异步操作
        setTimeout(function(){
            console.log('做饭失败！');
            reject('烧焦的米饭');
        }, 1000);
    });
    return p;
}
 
//吃饭
function eat(data){
    console.log('开始吃饭：' + data);
    var p = new Promise(function(resolve, reject){        //做一些异步操作
        setTimeout(function(){
            console.log('吃饭完毕!');
            resolve('完成！');
        }, 2000);
    });
    return p;
}
 
cook()
.then(eat, function(data){
  console.log(data + '没法吃!');
})

/*
输出：
    开始做饭。
    做饭失败！
    烧焦的米饭没法吃！
*/

 

catch方法：

1. 和then方法的第二个参数reject方法用法一致，执行“失败”回调方法

cook()
.then(eat)
.catch(function(data){
    console.log(data + '没法吃!');
});


2. 当执行第一个参数resolve方法时，如果抛出了异常（代码错误），js不会卡死，而进入到catch方法中

//做饭
function cook(){
    console.log('开始做饭。');
    var p = new Promise(function(resolve, reject){        //做一些异步操作
        setTimeout(function(){
            console.log('做饭完毕！');
            resolve('鸡蛋炒饭');
        }, 1000);
    });
    return p;
}
 
//吃饭
function eat(data){
    console.log('开始吃饭：' + data);
    var p = new Promise(function(resolve, reject){        //做一些异步操作
        setTimeout(function(){
            console.log('吃饭完毕!');
            resolve('完成！');
        }, 2000);
    });
    return p;
}
 
cook()
.then(function(data){
    throw new Error('米饭被打翻了！');
    eat(data);
})
.catch(function(data){
    console.log(data);
});

/*
输出：
    开始做饭。
    做饭完毕！
    Error：米饭被打翻了！
        at:xxx.html
*/
还可以添加多个 catch，实现更加精准的异常捕获。比如：
somePromise.then(function() {
    return a();
}).catch(TypeError, function(e) {
    //If a is defined, will end up here because
    //it is a type error to reference property of undefined
}).catch(ReferenceError, function(e) {
    //Will end up here if a wasn't defined at all
}).catch(function(e) {
    //Generic catch-the rest, error wasn't TypeError nor
    //ReferenceError
});

 

all方法：

该方法提供了并行执行异步操作的能力，在所有异步操作执行完毕之后才会进入到then方法中执行回调方法。

all方法接受一个数组，里面的值最终都返回一个Promise对象。all会把所有的异步操作的结果放到一个数组中传递给then方法。比如//切菜

function cutUp(){ console.log('开始切菜。'); var p = new Promise(function(resolve, reject){        //做一些异步操作
        setTimeout(function(){ console.log('切菜完毕！'); resolve('切好的菜'); }, 1000); }); return p; } //烧水
function boil(){ console.log('开始烧水。'); var p = new Promise(function(resolve, reject){        //做一些异步操作
        setTimeout(function(){ console.log('烧水完毕！'); resolve('烧好的水'); }, 1000); }); return p; } Promise .all([cutUp(), boil()]) .then(function(results){ console.log("准备工作完毕："); console.log(results); }); /* 输出： 开始切菜。
 开始烧水。 切菜完毕！ 烧水完毕！ 准备工作完毕： ["切好的菜","烧好的水"] */

 

race方法：

race按字面意思是，竞赛/赛跑。与all不同的是，所有的异步操作中只要有一个异步操作完成，就立即执行then回调方法。比如：

Promise
.race([cutUp(), boil()])
.then(function(results){
    console.log("准备工作完毕：");
    console.log(results);
});

/*
输出：
    开始切菜。
    开始烧水。
    切菜完毕！
    准备工作完毕：
    切好的菜
    烧水完毕！
*/

race 使用场景很多。比如我们可以用 race 给某个异步请求设置超时时间，并且在超时后执行相应的操作。比如：

//请求某个图片资源
function requestImg(){
    var p = new Promise(function(resolve, reject){
    　　var img = new Image();
    　　img.onload = function(){
       　　resolve(img);
    　　}
    　　img.src = 'xxxxxx';
    });
    return p;
}
 
//延时函数，用于给请求计时
function timeout(){
    var p = new Promise(function(resolve, reject){
        setTimeout(function(){
            reject('图片请求超时');
        }, 5000);
    });
    return p;
}
 
Promise
.race([requestImg(), timeout()])
.then(function(results){
    console.log(results);
})
.catch(function(reason){
    console.log(reason);
});

上面代码 requestImg 函数异步请求一张图片，timeout 函数是一个延时 5 秒的异步操作。我们将它们一起放在 race 中赛跑，结果如下：

  • 如果 5 秒内图片请求成功，那么便进入 then 方法，执行正常的流程。
  • 如果 5 秒钟图片还未成功返回，那么则进入 catch，报“图片请求超时”的信息。

链接: https://fly63.com/article/detial/4581

上一页:  CommonJS的模块加载下一页:  前端开发岗位面试中常考的源代码实现

es6 箭头函数的使用总结，带你深入理解js中的箭头函数

箭头函数是ES6中非常重要的性特性。它最显著的作用就是：更简短的函数,并且不绑定this,arguments等属性，它的this永远指向其上下文的 this。它最适合用于非方法函数，并且它们不能用作构造函数。

详解JavaScript模块化开发require.js

js模块化的开发并不是随心所欲的，为了便于他人的使用和交流，需要遵循一定的规范。目前，通行的js模块规范主要有两种：CommonJS和AMD

js解构赋值,关于es6中的解构赋值的用途总结

ES6中添加了一个新属性解构，允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。用途：交换变量的值、从函数返回多个值、函数参数的定义、提取JSON数据、函数参数的默认值...

ES6中let变量的特点，使用let声明总汇

ES6中let变量的特点：1.let声明变量存在块级作用域，2.let不能先使用再声明3.暂时性死区，在代码块内使用let命令声明变量之前，该变量都是不可用的，4.不允许重复声明

ES6的7个实用技巧

ES6的7个实用技巧包括：1交换元素，2 调试，3 单条语句，4 数组拼接，5 制作副本，6 命名参数，7 Async/Await结合数组解构

ES6 Decorator_js中的装饰器函数

ES6装饰器（Decorator）是一个函数，用来修改类的行为 在设计阶段可以对类和属性进行注释和修改。从本质上上讲，装饰器的最大作用是修改预定义好的逻辑，或者给各种结构添加一些元数据。

基于ES6的tinyJquery

Query作为曾经Web前端的必备利器，随着MVVM框架的兴起，如今已稍显没落。用ES6写了一个基于class简化版的jQuery，包含基础DOM操作，支持链式操作...

ES6 中的一些技巧，使你的代码更清晰，更简短，更易读！

ES6 中的一些技巧：模版字符串、块级作用域、Let、Const、块级作用域函数问题、扩展运算符、函数默认参数、解构、对象字面量和简明参数、动态属性名称、箭头函数、for … of 循环、数字字面量。

Rest/Spread 属性_探索 ES2018 和 ES2019

Rest/Spread 属性:rest操作符在对象解构中的使用。目前，该操作符仅适用于数组解构和参数定义。spread操作符在对象字面量中的使用。目前，这个操作符只能在数组字面量和函数以及方法调用中使用。

使用ES6让你的React代码提升到一个新档次

ES6使您的代码更具表现力和可读性。而且它与React完美配合！现在您已了解更多基础知识：现在是时候将你的ES6技能提升到一个新的水平！嵌套props解构、 传下所有props、props解构、作为参数的函数、列表解构

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!