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++primerplus》第6章练习题
本来前面五题都做完了,写博客时没保存好草稿= =,写了个整合版的程序,实现前五题的关键部分. 1.定义一个叫jojo的结构,存储姓名.替身和力量值,使用动态结构数组初始化二乔.承太郎和乔鲁诺乔巴纳等人 ...
浅谈 Java集合
Java 集合集合是对象的容器,定义了多个对象进行操作的常用方法,可实现数组的功能. Java集合类库所处位置:java.util.*. 与现代的数据结构类库的常见做法一样,Java集合类库也将接口 ...
如何免费安装正版Adobe
现在正版的Adobe都非常的贵,如果你想不花钱又想下载正版的Adobe,那么就请花几分钟时间学习以下本篇博客,告诉你如何免费下载正版Adobe! [一定要读完,不要看到一半就以为教您下载的是付费版] ...
roles学习笔记（模拟安装httpd服务）
这是目录(app 是模拟的角色) [root@test ansible]# tree.├── app_role.retry├── app_role.yml├── httpd_role.yml├── n ...
C++11——chrono库开发高精度计！我们可能学的不是同一门语言~
一.前言在我们写程序过程中,有时候需要测试我们的程序语句执行时间的耗时,当前也是有很多的库提供我们去使用,一直没有良好的跨平台的库可以提供出来:而且一般这种代码也是由我们程序员自己调用系统的库来进行 ...
19。删除链表倒数第N个节点
class ListNode: def __init__(self, val=0, next=None): self.val = val self.next = next# 这道题还是很简单的,我们只 ...
go init执行顺序
package test import "fmt" // 初始化函数引入包的时候要先执行可以重复定义多个同一个go文件从上到下多个文件是按照字符串进行排序从小到大执行 ...
CentOS8平台nginx日志的定时切分
一,编写bash脚本: [root@yjweb crontab]# vi split_nginx_logs.sh 代码: #!/bin/bash # 备份nginx的日志 # 昨天的日期 file_d ...
第八章 nginx基础介绍
一.nginx概述 nginx是一个开源且高性能.可靠的http web服务.代理服务. 开源:直接获取源代码高性能:支持海量并发可靠:服务稳定二.nginx特点 1.高性能高并发性能高,支持 ...
Helium文档13-WebUI自动化-helium快速切换到selenium状态并调用其方法
前言前面说过helium是对Selenium 进行了封装,那么我们如何使用selenium的方法呢,通过下面的介绍,我们能够清楚在helium中能够使用selenium的任何方法入参介绍 def ...

Es6-Promise初识