JavaScript Promise 快速入门

Promise 是什么？

Promise 是ECMAScript 6中提供了一个类。
Promise 实例对象代表一个异步操作的最终完成或者失败。

Promise 能干什么？

可以在Promise对象上绑定回调函数，这样就不需要在一开始把回调函数作为参数传入这个函数。
Promise 对象可以让异步操作以同步操作的流程表达出来。

这里演示一下使用Promise在回调上的优势。

不使用Promise的回调方式

在Promise之前，异步回调的方式是将回调函数作为参数传入异步函数中，在异步方法执行完成之后调用成功或是失败的回调函数，举例来看：

var successCallBack = function(result){console.log("成功执行的结果是="+result)
}
var failCallBack = function(result){console.log("失败执行的结果是="+result)
}
function asyncFunc(successCallBackFunc,failCallBackFunc){var isSuccess = true;//使用setTimeout模拟异步行为setTimeout(function(){//根据返回结果设置isSuccess的值if(isSuccess){successCallBackFunc("返回值1");}else{failCallBackFunc("返回值2");}},1000);
}
asyncFunc(successCallBack,failCallBack );控制台打印结果：
成功执行的结果是=返回值1

successCallBack 和 failCallBack 是两个函数的变量
*在 aysnFunc 函数中使用 setTimeout模拟异步行为， successCallBack 和 failCallBack 作为aysnFunc 的参数。当aysnFunc 里的异步方法执行完成后，调用回调方法。

使用Promise的回调方式

使用Promise的回调方式，上面的写法可以如下：

function asyncFuncPromise(){return new Promise(function(resolve,reject){//使用setTimeout模拟异步行为setTimeout(function(){resolve("返回值3");},1000);});
}
const promise = asyncFuncPromise();
promise.then(successCallBack);

与传统方式相比， Promise更简洁了，特别是对于多重的回调，优势更为明显。

Promise 的基本用法

创建Promise

new  Promise(function(resolve,reject){});

使用 new Promise() 创建一个Promise的实例。构造函数的参数是一个包含两个参数的函数（resolve, reject）。
resolve和reject 是两个回调函数，在回调函数内部根据执行情况调用resolve和reject函数。

var p = new Promise(function(resolve, reject) {// 异步任务需要处理的事情if(/* good condition */) {resolve('Success!');}else {reject('Failure!');}
});

构造参数是一个称为executor(执行器)的函数，这个函数有两个参数 resolve 和 reject，而且这两个参数也是函数。
异步操作成功，调用resolve 函数返回预期结果；出现意外错误，则调用reject函数传递错误信息

then() 和 catch()

p.then(function() { //执行完成后处理一些事情
}).catch(function() {//异常处理})

then(success, fail), then 方法可以接受两个回调函数作为参数，第一个回调函数在 Promise 对象的状态变为 resolved 时调用，第二个回调函数在 Promise 对象的状态转变为 rejected 时调用。
then() 和 catch() 返回的都是一个新的Promise实例，这样的话Promise可以链式调用then和catch，每一个方法的返回值作为下一个方法的参数：

看以下实例代码来看：

var p = new Promise(function(resolve,reject){//使用setTimeout模拟异步行为setTimeout(function(){//resolve("返回值4");reject("返回值5");},1000);
}).then(successCallBack).catch(failCallBack);

如果Promise的构造函数最后调用 resolve() , 则执行then() ; 最后调用 reject() , 则执行catch()

Promise 链

因为then()，catch() 方法的返回值也是Promise实例，所以可以通过多次调用then() 可以添加多个回调函数，它们按照插入顺序执行。类似：

p.then(function () { console.log("链1") }).then(function () { console.log("链2") });

在线运行示例

https://jsrun.net/GHeKp/edit

JavaScript Promise 快速入门相关推荐

【JavaScript：快速入门】
文章目录 JavaScript 1. 快速入门 1.1 引入JavaScript 1.2 基本语法入门 1.3 数据类型 1.4 严格检查模式 'use strict' JavaScript Java ...
JavaScript(一)——快速入门
文章目录 1. JavaScript概述 2. 历史 3. 快速入门 3.1 引入JavaScript方式 3.2 基本语法 3.3 数据类型 4. 严格检查模式 1. JavaScript概述 Ja ...
什么是JavaScript（快速入门）
目录 1.什么是JavaScript 概述历史特点 2.基本使用及HelloWorld 1.引入JavaScript 2.基本语法网页功能(F12): 3.浏览器控制台使用 4.数据类型快速浏览 ...
【JavaScript】JavaScript之快速入门
一.基本概念 JavaScript是一种基于对象(Object Based)和事件驱动(Event Driver)的脚本语言,它本身提供了非常丰富的内部对象供开发人员使用. ...
html遍历集合如何修改其中一,JavaScript简单快速入门
" 别害怕顾虑,想到就去做,这世界就是这样,当你把不敢去实现梦想的时候梦想就会离你越来越远,当你勇敢地去追梦的时候,全世界都会来帮你."你好,我是梦阳辰!未来我陪你一起成长! 01 ...
javascript基础快速入门
javascript 是基于对象和事件驱动的脚本语言. 1.javascript 的基本标签 <script type="text/javascript">js代码&l ...
JavaScript数组快速入门
文章目录创建数组常见属性二维数组常见方法 push() pop() unshift() shift() forEach() slice() splice() contact() join() ...
JavaScript对象快速入门
文章目录对象对象的分类创建.读取.删除属性.[].in 引用数据类型对象字面量函数创建与调用函数的参数函数的返回值立即执行函数方法枚举对象中的属性作用域全局作用域声明变量 ...
前端三大技术 HTML、CSS、JavaScript 快速入门手册
听到前端技术,不少朋友一定会感到有些陌生.但其实,前端,你每天都在接触. 你正在使用的APP,你正在浏览的网页,这些你能看到的界面,都属于前端. 而前端最重要的三大技术,HTML,CSS,JavaSc ...