Es6-Promise初识
Promise
含义:
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。
实例化Promise
const p = new Promise();
接收一个参数，这个参数是一个函数，函数有两个参数resolve和reject，异步函数过后，p.then(),里面有两个回调函数，前面那个是成功后的，后面一个是失败时的，如果异步函数中调用resolve则调用第一个函数，否则调用第二个。
const p =new Promise(function (resolve,reject) {
setTimeout(function () {
// let data ='resolve成功';
// resolve(data);
let err='reject失败'
reject(err)
},1000)
});
p.then(function (value) { console.log(value); },function (reason) {
console.error(reason);
})
读取文件
const fs=require('fs');
const p=new Promise(function(resolve,reject){
fs.readFile("./chunxiao.mdd",(err,data)=>{
if(err){
reject(err)
}else(
resolve(data)
)
})
})
p.then(function(value){
console.log(value.toString());
},function(reason){
console.log('读取失败');
})
Ajax函数封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const xhr= new XMLHttpRequest();
const p=new Promise((resolve,reject)=>{
xhr.open('get','https://api.apiopen.top/getJoke');
xhr.send();
xhr.onreadystatechange=function(){
if(xhr.readyState ===4){
if(xhr.status>=200&xhr.status<300){
resolve(xhr.response);
}else{
reject(xhr.status);
}
}
}
})
p.then(function(value){
console.log(value)
},function (reason) {
console.log(reason)
})
</script>
</body>
</html>
初试catch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const p =new Promise(function (resolve,reject) {
setTimeout(function () {
// let data ='resolve成功';
// resolve(data);
let err='catch失败' reject(err)
},1000)
});
//
p.catch(function (reason) {
console.warn(reason);
})
</script>
</body>
</html>
catch总结：其实可以把catch看作是then的语法糖，里面就少了一个resolve的参数。
Promise.prototype.finally()
finally()方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。该方法是 ES2018 引入标准的。
promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});
上面代码中，不管promise最后的状态，在执行完then或catch指定的回调函数以后，都会执行finally方法指定的回调函数。
实例(体现promise的好处)
通过新建一个 Promise 对象好像并没有看出它怎样 "更加优雅地书写复杂的异步任务"。我们之前遇到的异步任务都是一次异步，如果需要多次调用异步函数呢？例如，如果我想分三次输出字符串，第一次间隔 1 秒，第二次间隔 4 秒，第三次间隔 3 秒：
setTimeout(function () {
console.log("First");
setTimeout(function () {
console.log("Second");
setTimeout(function () {
console.log("Third");
}, 3000);
}, 4000);
}, 1000);
这段程序实现了这个功能，但是它是用 "函数瀑布" 来实现的。可想而知，在一个复杂的程序当中，用 "函数瀑布" 实现的程序无论是维护还是异常处理都是一件特别繁琐的事情，而且会让缩进格式变得非常冗赘。
现在我们用 Promise 来实现同样的功能：
new Promise(function (resolve, reject) {
setTimeout(function () {
console.log("First");
resolve();
}, 1000);
}).then(function () {
return new Promise(function (resolve, reject) {
setTimeout(function () {
console.log("Second");
resolve();
}, 4000);
});
}).then(function () {
setTimeout(function () {
console.log("Third");
}, 3000);
});
Es6-Promise初识的更多相关文章
- 通过 ES6 Promise 和 jQuery Deferred 的异同学习 Promise
Deferred 和 Promise ES6 和 jQuery 都有 Deffered 和 Promise,但是略有不同.不过它们的作用可以简单的用两句话来描述 Deffered 触发 resolve ...
- ES6 Promise 接口
构造函数 new Promise(function(resolve, reject){}); 构造函数接受一个函数(executor)作为参数,该函数在返回 Promise 实例之前被调用.函数的两个 ...
- Es6 Promise 用法详解
Promise是什么?? 打印出来看看 console.dir(Promise) 这么一看就明白了,Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方 ...
- ES6 Promise 全面总结
转载:点击查看原文 ES6 Promise对象 ES6中,新增了Promise对象,它主要用于处理异步回调代码,让代码不至于陷入回调嵌套的死路中. @-v-@ 1. Promise本质 Promise ...
- ES6 Promise 异步操作
最近越来越喜欢与大家进行资源分享了,并且及时的同步到自己的园子内,为什么呢? 一.小插曲(气氛搞起) 在上个月末,由于领导的高度重视(haha,这个高度是有多高呢,185就好了),走进了公司骨干员工的 ...
- 微信小程序Http高级封装 es6 promise
公司突然要开放微信小程序,持续蒙蔽的我还不知道小程序是个什么玩意. 于是上网查了一下,就开始着手开发..... 首先开发客户端的东西,都有个共同点,那就是 数据请求! 看了下小程序的请求方式大概和a ...
- 解析ES6 Promise
ES6 Promise 概念之类的,大概读者都应该有所知道,接下来我们直入终点. 先让我们来看看什么是Promise吧,他是一个object,类,arry,function? 首先,学习它的时候应该讲 ...
- jquery Promise和ES6 Promise的区别
1. Deferred对象有resolve和reject方法,可以直接修改状态 jquery用Deferred实现了Promise规范,Deferred与ES6 Promise的最大区别是: Defe ...
- ES6 Promise对象then方法链式调用
then()方法的作用是Promise实例添加解决(fulfillment)和拒绝(rejection)状态的回调函数.then()方法会返回一个新的Promise实例,所以then()方法后面可以继 ...
- ES6 Promise(2)
Promise的兴起,是因为异步方法调用中,往往会出现回调函数一环扣一环的情况.这种情况导致了回调金字塔的出现.不仅代码写起来费劲不美观,而且问题复杂的时候,阅读代码的人也难以理解. db.save( ...
随机推荐
- C++派生类与基类的关系
派生类与基类有这些关系: 1.公有派生类从基类继承所有成员和成员函数 2.公有派生类无法直接访问从基类继承的私有成员,但可以通过继承的公共接口访问. 3.公有派生类无法继承基类的友元函数. 4.基类先 ...
- P 2568 GCD
对于这道题,我们要求的是 \(\displaystyle \sum_{i=1}^{N}\sum_{j = 1} ^{N}\) gcd(i,j)为质数 首先我们很容易想出来怎么打暴力,我们可以对于每个 ...
- GAN网络之入门教程（四）之基于DCGAN动漫头像生成
目录 使用前准备 数据集 定义参数 构建网络 构建G网络 构建D网络 构建GAN网络 关于GAN的小trick 训练 总结 参考 这一篇博客以代码为主,主要是来介绍如果使用keras构建一个DCGAN ...
- 洛谷 P1903 [国家集训队]数颜色 / 维护队列 带修莫队
题目描述 墨墨购买了一套\(N\)支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问.墨墨会向你发布如下指令: \(1\). \(Q\) \(L\) \(R\)代表询问你从第\(L\) ...
- firewalld和iptables区别
在RHEL7里有几种防火墙共存:firewalld.iptables.ebtables,默认是使用firewalld来管理netfilter子系统,不过底层调用的命令仍然是iptables等. fir ...
- Rust之路（3）——数据类型 下篇
[未经书面同意,严禁转载] -- 2020-10-14 -- 架构是道,数据是术.道可道,非常道:术不名,不成术!道无常形,术却可循规. 学习与分析数据类型,最基本的方法就是搞清楚其存储原理,变量和对 ...
- MeteoInfoLab脚本示例：站点数据绘制等值线
站点数据绘制等值线需要首先将站点数据插值为格点数据,MeteoInfo中提供了反距离权法(IDW)和cressman两个方法,其中IDW方法可以有插值半径的选项.这里示例读取一个MICAPS第一类数据 ...
- Js中Currying的应用
Js中Currying的应用 柯里化Currying是把接受多个参数的函数变换成接受一个单一参数的函数,并且返回接受余下的参数且返回结果的新函数的技术,是函数式编程应用. 描述 如果说函数式编程中有两 ...
- 皕杰报表：连接数据库失败，请检查数据源配置(oracle.jdbc.driver.OracleDriver)
皕杰报表:连接数据库失败,请检查数据源配置(oracle.jdbc.driver.OracleDriver)问题解决: 缺少了classes12.jar 在窗口--首选项--报表运行时配置--添加-- ...
- js改变,设置table单双行颜色,jquery改变,设置table单双行颜色
1.js实现单双行以不同颜色显示 $(document).ready(function () { var color = "#ffeab3"; $("#GvList tr ...