一、Promise的前言

解决回调地狱

//以往回调方式
函数1(function(){
//代码执行...(ajax1) 函数2(function(){
//代码执行...(ajax2) 函数3(function(data3){
//代码执行...(ajax3)
});
...
});
}); //Promise回调方式:链式调用,可构建多个回调函数。
//例如请求一个ajax之后,需要这个拿到这个ajax的数据去请求下一个ajax
promise().then().then()...catch()

当页面逻辑复杂起来的时候,管理起来特别不容易。

为解决这种问题,CommonJS提出Promise概念.

  • 从字意去理解:Promise表示一种承诺,它拥有由浏览器引擎提供的两个函数:resolve和reject.通过具体情况调用相应的函数,然后再通过then写上对应的回调函数。
  • 从构建代码理解:
//首先要创建Promise实例
let promise = new Promise( (resolve, reject) => {
//执行相应代码并根据情况调用resolve或reject
...
}) //在promise的then方法中执行回调
promise.then(function(){
//第一个参数是返回resolve时,回调执行的函数
},function(){
//第二个是回调返回reject时,回调执行的函数
}
}

解释一下上面几个概念:

  • Promise: Promise有三个状态:pending(等待)、resolve(完成)、 reject(拒绝)

    两种状态改变方式:pending => resolve, pending => reject

    在构建Promise实例调用resolve或reject就是状态改变的时候。当状态改变的时候,其方法then就会执行对应状态的回调函数。

  • resolve: then方法的第一个参数,通常作为事件成功的回调函数

  • reject: then方法的第二个参数,通常作为事件失败的回调函数,也可以作为catch的参数出现

二、Promise入门小例子

定时器调用

  1. 最简单的例子
const promise = new Promise(function(resolve, reject){
setTimeout(resolve,1000);//1s后状态变更为resolve,调用then方法的第一个参数
}) promise.then(function(){
console.log('resolve:成功回调函数')
},function(){
console.log('reject:失败回调函数')
})

  1. 也可以写成回调函数的方式,并把reject状态的回调函数放到catch里
const promise = new Promise((resolve, reject) => {
setTimeout(reject,1000);
}) promise.then( () => {
console.log('resolve:成功回调函数')
}).catch(() => {
console.log('reject:失败回调函数')
})
  1. 请求事件通常会附带数据给回调函数。要传递参数,只需要附带在函数后面即可

    注意!传多个数据需要通过数组传递
const promise = new Promise((resolve, reject) => {
setTimeout(reject,1000,'我是value值');
}) promise.then((value) => {
console.log('resolve:' + value)
}).catch((value) => {
console.log('reject:'+ value)
})

传多个参数➡

//第一种,可以看到单个传值是无效的
const promise = new Promise((resolve, reject) => {
setTimeout(resolve,1000,'参数1','参数2');
}) promise.then((value1,value2) => {
console.log('value1:' + value1) //value1:参数1
console.log('value2:' + value2) //value2:undefined
}).catch((value) => {
console.log(value)
})
//第二种:数组传值
const promise = new Promise((resolve, reject) => {
setTimeout(resolve,1000,['参数1','参数2']);
})
promise.then((value1) => {
console.log('value1:' + value1) //value1:参数1,参数2
}).catch((value) => {
console.log(value)
})

以上就是我对Promise的理解啦!是一些Promise入门的简单知识点.

想深入了解的话可以看看阮一峰老师的《ES6入门》:

http://es6.ruanyifeng.com/#docs/promise

ES6中Promise的入门(结合例子)的更多相关文章

  1. es6中promise实现ajax的例子

    function getData(url){ var pro = new Promise(function(resolve,reject){ var xhr = null; try{ xhr = ne ...

  2. ES6中promise的使用方法

    先看看ES5中异步编程的使用. let ajax = function (callBlack) { setTimeout(function () { callBlack && call ...

  3. 对于ES6中Promise的个人见解

    1.js中常见的异步 JavaScript可以响应用户的一些异步交互,比如单击鼠标和按键盘等操作. let button = document.getElementById("btn&quo ...

  4. ES6中Promise对象个人理解

    Promise是ES6原生提供的一个用来传递异步消息的对象.它减少了传统ajax金字塔回调,可以将异步操作以同步操作的流程表达出来使得代码维护和可读性方面好很多. Promise的状态: 既然是用来传 ...

  5. ES6中promise总结

    一.什么是ES6的Promise 讲太多也没有.直接在打印出来就好,console.dir(Promise) Promise 是一个构造函数,自身有all, reject, resolve 这几个眼熟 ...

  6. ES6 中 Promise

    在说Promise之前我们先简单说一下什么是同步异步? 同步(Sync):所谓同步,就是发出一个功能调用时,在没有得到结果之前,该调用就不返回或继续执行后续操作. 异步(Async):异步与同步相对, ...

  7. ES6 中 Promise 详解

    Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise 是一个对象,从它可以获取异步操作的消息.Promise 提供统一的 API ...

  8. ES6中Promise详解

    Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise 是一个对象,从它可以获取异步操作的消息. Promise 提供统一的 AP ...

  9. 阿里前端测试题--关于ES6中Promise函数的理解与应用

    今天做了阿里前端的笔试题目,原题目是这样的 //实现mergePromise函数,把传进去的数组顺序先后执行,//并且把返回的数据先后放到数组data中 const timeout = ms => ...

随机推荐

  1. windows中安装node.js和测试

    首先下载node.js安装包:下载页面:http://down.keleyi.com/goto/node.js.htm 选择windows msi安装包,根据自己操作系统选择32位或者64位安装包.然 ...

  2. 认识Java虚拟机的内部体系结构、gc示例

    认识Java虚拟机的内部体系结构 Java虚拟机的内部体系结构也许很少有人去关心,因为对于Java程序员来说,一般只需要跟API打交道就可以了.这些体系结构只是Java虚拟机内部的结构而已.但是如果理 ...

  3. HDU-1253 胜利大逃亡 (BFS)

    此题可以做为三维深搜模板题.. 胜利大逃亡 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Ot ...

  4. Linq转成sql后的分页方法

    sql 分页 -- Region Parametersdeclare @pageindex int set @pageindex=2set @pagesize=10 DECLARE @p0 Int = ...

  5. HDU ACM 1098 Ignatius's puzzle

    分析:裴蜀定理,a,b互质的充要条件是存在整数x,y使ax+by=1.存在整数x,y,使得ax+by=c.那么c就是a,b的公约数. 如果存在数a ,由于对随意x方程都成立.则有当x=1时f(x)=1 ...

  6. luci-bwc

    文件位于:   ../feeds/luci/modules/admin-full/src/luci-bwc.c 功能: Very simple bandwidth collector cache fo ...

  7. 吞吐量(TPS)、QPS、并发数、响应时间(RT)概念

    开发的原因,需要对吞吐量(TPS).QPS.并发数.响应时间(RT)几个概念做下了解,查自百度百科,记录如下:1. 响应时间(RT)  响应时间是指系统对请求作出响应的时间.直观上看,这个指标与人对软 ...

  8. 【效率工具】SSH一键登录脚本(可一键从跳板机登录线上服务器)

    说明 前阵子上线,一次性上了十个服务,一直上到凌晨才完事,期间每个服务都要先输入跳板机的登录信息来登录跳板机,然后再输入线上服务器的信息来登录线上服务器,实在是太过于麻烦,而且有些服务还有好几台服务器 ...

  9. (转)azkaban job参数说明

    azkaban的工作流中的参数可以分为如下几个类型:azkaban UI 页面输入参数, 环境变量参数, job作业文件中定义的参数,工作流的用户定义的属性文件,上游作业传递给下游的参数,工作流运行时 ...

  10. java crm 进销存 springmvc SSM 项目 系统 源码

    系统介绍: 1.系统采用主流的 SSM 框架 jsp JSTL bootstrap html5 (PC浏览器使用) 2.springmvc +spring4.3.7+ mybaits3.3  SSM ...