JavaScript异步与Promise基本用法(resolve与reject)
Promise解决的问题
相信每个前端都遇到过这样一个问题，当一个异步任务的执行需要依赖另一个异步任务的结果时，我们一般会将两个异步任务嵌套起来，这种情况发生一两次还可以忍，但是发生很多次之后，就形成了所谓的回调地狱，代码层层嵌套，环环相扣，很明显，逻辑稍微复杂一些，这样的程序就会变得难以维护。就比如我们昨天的那个回调地狱的例子：
function funA(callback) {
console.log("A");
setTimeout(() = > {
callback()
}, 100)
}
function funB() {
console.log("B")
}
function funC(callback) {
console.log("C")
setTimeout(() = > {
callback()
}, 1000)
}
function funD() {
console.log("D")
}
function funE() {
console.log("E")
}
function funF() {
console.log("F")
}
funA(() = > {
funB()
funC(() = > {
funD()
})
funE()
})
funF()
对于这种情况，程序员们想了很多解决方案（比如将代码模块化），但流程控制上，还是没有避免大量的嵌套。但在ES6之后的标准里，Promise的标准化，一定程度上解决了JavaScript的流程操作问题。
什么是Promise
在《异步与性能》的第三章中有这么个场景来比喻 Promise：
我走到快餐店的柜台前，点了一个起士汉堡。并交了1.47美元的现金。通过点餐和付款，我为得到一个 值（起士汉堡）制造了一个请求。我发起了一个事务。
但是通常来说，起士汉堡不会立即到我手中。收银员交给一些东西代替我的起士汉堡：一个带有点餐排队号的收据。这个点餐号是一个“我欠你”的许诺（Promise），它保证我最终会得到我的起士汉堡。
于是我就拿着我的收据和点餐号。我知道它代表我的 未来的起士汉堡，所以我无需再担心它——除了挨饿！
在我等待的时候，我可以做其他的事情，比如给我的朋友发微信说，“嘿，一块儿吃午餐吗？我要吃起士汉堡”。
我已经在用我的 未来的起士汉堡 进行推理了，即便它还没有到我手中。我的大脑可以这么做是因为它将点餐号作为起士汉堡的占位符号。这个占位符号实质上使这个值 与时间无关。它是一个 未来的值。
最终，我听到，“113号！”。于是我愉快地拿着收据走回柜台前。我把收据递给收银员，拿回我的起士汉堡。 换句话说，一旦我的 未来的值 准备好，我就用我的许诺值换回值本身。
但还有另外一种可能的输出。它们叫我的号，但当我去取起士汉堡时，收银员遗憾地告诉我，“对不起，看起来我们的起士汉堡卖光了。”把这种场景下顾客有多沮丧放在一边，我们可以看到 未来的值 的一个重要性质：它们既可以表示成功也可以表示失败。
每次我点起士汉堡时，我都知道我要么最终得到一个起士汉堡，要么得到起士汉堡卖光的坏消息，并且不得不考虑中午吃点儿别的东西。
我由等待汉堡变成了等到或者等不到，这个过程不可逆，
上面很形象的介绍了promise，上面的等待汉堡和得到汉堡，汉堡卖光了，得不到汉堡，分别对应promise的三种状态 **pending: 进行中，既不是成功，也不是失败状态。 fulfilled: 意味着操作成功完成。 rejected: 意味着操作失败。**
Promise的基本用法
语法
new Promise( function(resolve, reject) {...} ); //reject参数 可不选
参数
executor
executor是带有 resolve 和 reject 两个参数的函数 。Promise构造函数执行时立即调用executor 函数， resolve 和 reject 两个函数作为参数传递给executor（executor 函数在Promise构造函数返回新建对象前被调用）。resolve 和 reject 函数被调用时，分别将promise的状态改为fulfilled（完成）或rejected（失败）。executor 内部通常会执行一些异步操作，一旦完成，可以调用resolve函数来将promise状态改成fulfilled，或者在发生错误时将它的状态改为rejected。
如果在executor函数中抛出一个错误，那么该promise 状态为rejected。executor函数的返回值被忽略。
对更多对Promise的描述感兴趣的可以 点击查看MDN Promise下面我们开始上代码
新建一个Promise的实例：
let promise = new Promise((resolve, reject) = > {
setTimeout(() = > {
let random = Math.random()
if (random > 0.5) {
resolve(`resolve$ {random}`)
} else {
resolve(`reject$ {random}`)
}
}, 1000)
})
由上所示，Promise的构造函数接收一个函数作为参数，该函数接受两个额外的函数，resolve和reject，这两个函数分别代表将当前Promise置为fulfilled(已成功)和rejected(已失败)两个状态。Promise正是通过这两个状态来控制异步操作的结果。接下来我们将讨论Promise的用法，实际上Promise上的实例promise是一个对象，不是一个函数。在声明的时候，Promise传递的参数函数会立即执行，因此Promise使用的正确姿势是在其外层再包裹一层函数。
let run = function() {
return new Promise((resolve, reject) => {
setTimeout(() => {
let random = Math.random()
if (random > 0.5) {
resolve(`resolve:${random}`)
} else {
reject(`reject:${random}`)
}
}, 1000)
})
}
run()
这是Promise的正常用法，接下来，就是对异步操作结果的处理，接着上面创建的函数run()
run().then(
function(value) {
console.log(value)
})
每个Promise的实例对象，都有一个then的方法，这个方法就是用来处理之前各种异步逻辑的结果。
then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。
下面是一个用Promise对象实现的 Ajax 操作的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript异步</title>
</head>
<body>
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script>
new Promise((resolve, reject) => {
$.ajax({
url: "https://easy-mock.com/mock/5c249dbe46e8386d0b21b475/example_copy_copy/promisetest",
success: res => {
if (res.code == 0) {
resolve(res.data)
} else {
reject(res.desc)
}
}
});
})
.then(res => {
console.log(res);
},err =>{
console.log(err)
}) </script> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript异步</title>
</head>
<body>
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script>
var a = new Promise(
//下面函数为executor函数，带有 resolve 和 reject 两个参数的函数 。Promise构造函数执行时立即调用executor 函数， resolve 和 reject 两个函数作为参数传递给executor（executor 函数在Promise构造函数返回新建对象前被调用）。
(resolve, reject) => {
$.ajax({
url: "https://api.apiopen.top/musicBroadcasting",
success: res => {
if (res.code == 200) {
console.log('1',res.result)
// resolve()异步回调将promise变为fulfilled(已成功)状态
resolve(res.result)//res.message为参数A
} else {
// reject()异步回调将promise变为rejected(已失败)状态
reject(res.result)//res.desc为参数B
}
}
});
})
// 每个Promise的实例对象，都有一个then的方法，这个方法就是用来处理之前各种异步逻辑的结果（fulfilled(已成功)状态或者rejected(已失败)状态）
// 第一个回调函数是Promise对象的状态变为resolved时调用，
// 第二个回调函数是Promise对象的状态变为rejected时调用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。
.then(res => {
console.log('res参数来自resolve(A)传入的参数A',res)
},err =>{
console.log('reject(B)传入的参数B',err)
})
console.log(a) // 如果异步操作获得了我们想要的结果，那我们将调用resolve函数，在then的第一个作为参数的匿名函数中可以获取数据，如果我们得到了错误的结果，调用reject函数，
// 在then函数的第二个作为参数的匿名函数中获取错误处理数据。
</script> </body>
</html>
当res.code == 0 为接口调用成功 输出：
手动把 上面代码 res.code == 0 改为 res.code == 1 就会抱一个错误，输出：
如果异步操作获得了我们想要的结果，那我们将调用resolve函数，在then的第一个作为参数的匿名函数中可以获取数据，如果我们得到了错误的结果，调用reject函数，在then函数的第二个作为参数的匿名函数中获取错误处理数据。
这样，一个次完整的Promise调用就结束了。对于Promise的then()方法，then总是会返回一个Promise实例，因此你可以一直调用then，形如run().then().then().then().then().then()…
在一个then()方法调用异步处理成功的状态时，你既可以return一个确定的“值”，也可以再次返回一个Promise实例，当返回的是一个确切的值的时候，then会将这个确切的值传入一个默认的Promise实例，并且这个Promise实例会立即置为fulfilled状态，以供接下来的then方法里使用。看代码：
let num = 0
let run = function() {
return new Promise(resolve => {
resolve(`${num}`)})
} run().then(val => {
console.log(val)
return val
})
.then(val =>{
val++
console.log(val)
return val
})
.then(val =>{
val++
console.log(val)
})
输出：
根据这个特性，我们就可以将相互依赖的多个异步逻辑，进行比较顺序的管理了，解决了让人头痛的回调地狱问题。
今天我们就先到这里，明天我们讲一下Promise.then()与Promise.catch()
友情链接：点击查看所有文章目录
原文链接：https://blog.csdn.net/qq_42911663/article/details/85790181
JavaScript异步与Promise基本用法(resolve与reject)的更多相关文章
- promise对象里resolve和reject状态讲解及Promise.all()的使用
首先来说下同步异步与阻塞非阻塞的概念,同步异步与阻塞非阻塞并没有关系.同步异步主要是事情做完以后,如何进行处理.或者说关注的是一种消息通信机制. 同步的情况下,是由处理消息者自己去等待消息是否被触发: ...
- javascript异步下载 Promise实现
一般下载都是直接打开一个链接就行.var URL = 'XXXX';window.open(URL)其实这样会有些问题:1. 浏览器禁止打开新窗口,导致无法下载 那么怎么解决呢?这样: <a h ...
- Javascript异步编程之三Promise: 像堆积木一样组织你的异步流程
这篇有点长,不过干货挺多,既分析promise的原理,也包含一些最佳实践,亮点在最后:) 还记得上一节讲回调函数的时候,第一件事就提到了异步函数不能用return返回值,其原因就是在return语句执 ...
- 彻底理解Javascript 中的 Promise（-------------------------------***---------------------------------）
ES6原生提供了 Promise 对象. 到底是何方妖怪呢?打出来看看: 所谓 Promise,就是一个对象,用来传递异步操作的消息.它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个 ...
- JavaScript异步编程__“回调地狱”的一些解决方案
异步编程在JavaScript中非常重要.过多的异步编程也带了回调嵌套的问题,本文会提供一些解决“回调地狱”的方法. setTimeout(function () { console.log('延时触 ...
- [js高手之路] es6系列教程 - promise常见用法详解(resolve,reject,catch,then,all,race)
关于promise我在之前的文章已经应用过好几次,如[js高手之路]Node.js+jade+express+mongodb+mongoose+promise实现todolist,本文就来讲解下pro ...
- JavaScript异步编程（1）- ECMAScript 6的Promise对象
JavaScript的Callback机制深入人心.而ECMAScript的世界同样充斥的各种异步操作(异步IO.setTimeout等).异步和Callback的搭载很容易就衍生"回调金字 ...
- 深入理解 JavaScript 异步系列（3）—— ES6 中的 Promise
第一部分,Promise 加入 ES6 标准 原文地址 http://www.cnblogs.com/wangfupeng1988/p/6515855.html 未经作者允许不得转载! 从 jquer ...
- [转载]JavaScript异步编程助手：Promise模式
http://www.csdn.net/article/2013-08-12/2816527-JavaScript-Promise http://www.cnblogs.com/hustskyking ...
随机推荐
- UVA10900 So you want to be a 2n-aire?
So you want to be a 2n-aire? PDF 在一个电视娱乐节目中,你一开始有1元钱.主持人会问你n个问题,每次你听到问题后有两个选择:一是放弃回答该问题,退出游戏,拿走奖金:二是 ...
- 基于Ajax技术的前后端Json数据交互方式实现
前言 使用浏览器访问网站是日常生活中必不可少的一件事情,当我们在浏览器地址栏中输入网址后会看到网站的内容,那么这个过程中发生了什么?下面简单介绍下浏览器访问网站过程. 第一步:浏览器向DNS服务器发起 ...
- swoole 协程channel乱测
channel和数组差不多,可以被用作队列,属性capacity是设置容量,isEmpty() isFull() 用来判断队列是空还是满,push()加入队列 pop()弹出队列 interface ...
- 计数dp做题笔记
YCJS 3924 饼干 Description 给定一个长度为\(n\)的序列,序列每个元素的取值为\([1,x]\),现在给定\(q\)个区间,求在所有取值方案中,区间最小值的最大值的期望是多少? ...
- bcp导入导出sybase、sqlserver数据库数据
常用数据备份格式为: bcp dbname..tablename out c:\temp\filename -Usa -Ppassword -Sservername -c 其中 dbname为数据库名 ...
- 初次接触python，怎么样系统的自学呢？
关注专栏 写文章登录 给伸手党的福利:Python 新手入门引导 Crossin 2 个月前 这是一篇 Python 入门指南,针对那些没有任何编程经验,从零开始学习 Python 的同学.不管你 ...
- Jquery 2.0+版本不支持IE8，如何解决？
用了JQuery2.0+以后,在IE8下会报错,下面是我的方法. 先看代码: <!--[if !IE]> --> <script src="/Scrip ...
- Codeforces 955C Sad powers（数论）
Codeforces 955C Sad powers 题意 q组询问,每次询问给定L,R,求[L,R]区间内有多少个数可以写成ap的形式,其中a>0,p>1,1 ≤ L ≤ R ≤ 1e1 ...
- HTTP之Cookie和Session
1. Cookie 1.1 为什么需要 Cookie? HTTP 协议是一种无状态的协议,也就是说,当前的 HTTP 请求与以前的 HTTP 请求没有任何联系.显然,这种无状态的情形在某些时候将让用户 ...
- 常用css模板
段落超出显示省略号(可单行多行) .p-content{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-b ...