ES6 Promise用法总结

偏执的太偏执、 2023-07-04 04:40 124阅读 0赞

### 目录： ###

*   *  一、Promise概述
     *  二、使用Promise的好处
     *  三、Promise基本用法
     *  四、基于Promise发送Ajax请求
     *  五、Promise 基本API
     *   *   *  实例方法
             *   *  .then()
                 *  .catch()
                 *  .finally()
             *  静态方法
             *   *  .all()
                 *  .race()

## 一、Promise概述 ##

简单的来讲，Promise就是异步编程的一种解决方案。从语法上讲，Promise是一个对象，从它可以获取到异步操作的消息。

## 二、使用Promise的好处 ##

*  可以避免多层异步调用嵌套问题(回调地狱)，提高代码的可读性。
 *  promise 提供了简洁的API 使得异步操作更加容易。

## 三、Promise基本用法 ##

*  实例化 `Promise`对象，构造函数中传递参数，该函数中用于处理异步任务。
 *  `resolve`和`reject`两个参数用于处理成功和失败两种情况，并通过p.then获取处理结果。

var p = new Promise(function(resolve,reject){ 
    	// 成功时调用 resolve()
    	// 失败时调用 reject()
    });
    p.then(function(ret){ 
    	//从resolve得到正常结果
    },function(ret){ }
    	//从reject得到错误信息
    ));

实操小案例：

<script type="text/javascript"> /* 1. Promise基本使用 我们使用new来构建一个Promise Promise的构造函数接收一个参数，是函数，并且传入两个参数： resolve，reject， 分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数 */ var p = new Promise(function(resolve, reject){ //2. 这里用于实现异步任务 setTimeout setTimeout(function(){ var flag = false; if(flag) { //3. 正常情况 resolve('hello'); }else{ //4. 异常情况 reject('出错了'); } }, 100); }); // 5 Promise实例生成以后，可以用then方法指定resolved状态和reject状态的回调函数 // 在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了 p.then(function(data){ console.log(data) },function(info){ console.log(info) }); </script>

## 四、基于Promise发送Ajax请求 ##

<script type="text/javascript">
        /* 基于Promise发送Ajax请求 */
        function queryData(url) { 
         #   1.1 创建一个Promise实例
          var p = new Promise(function(resolve, reject){ 
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){ 
              if(xhr.readyState != 4) return;
              if(xhr.readyState == 4 && xhr.status == 200) { 
                # 1.2 处理正常的情况
                resolve(xhr.responseText);
              }else{ 
                # 1.3 处理异常情况
                reject('服务器错误');
              }
            };
            xhr.open('get', url);
            xhr.send(null);
          });
          return p;
        }
        # 在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了
        queryData('http://localhost:3000/data')
          .then(function(data){ 
            console.log(data)
            #  1.4 想要继续链式编程下去 需要 return  
            return queryData('http://localhost:3000/data1');
          })
          .then(function(data){  //返回的是上一个实例对象的结果
            console.log(data);
            return queryData('http://localhost:3000/data2');
          })
          .then(function(data){ 
            console.log(data)
          });
      </script>

## 五、Promise 基本API ##

#### 实例方法 ####

这些api都位于函数原型(prototype)中，是实例方法，所以都该用实例进行调用的。

##### .then() #####

*  用于得到异步任务执行后的正确结果

##### .catch() #####

*  获取异常信息

##### .finally() #####

*  成功与否都会执行（不是正式标准，最新Chrome提供了支持）

<script type="text/javascript"> /* Promise常用API-实例方法 */ // console.dir(Promise); function foo() { return new Promise(function(resolve, reject){ setTimeout(function(){ // resolve(123); reject('error'); }, 100); }) } // foo() // .then(function(data){ // console.log(data) // }) // .catch(function(data){ // console.log(data) // }) // .finally(function(){ // console.log('finished') // }); // -------------------------- // 两种写法是等效的 foo() .then(function(data){ # 得到异步任务正确的结果 console.log(data) },function(data){ # 获取异常信息 console.log(data) }) # 成功与否都会执行（不是正式标准） .finally(function(){ console.log('finished') }); </script>

#### 静态方法 ####

##### .all() #####

*  `Promise.all()` 并发处理多个异步任务，所有任务都执行完才能得到结果。
 *  `Promise.all`方法接受一个数组作参数，数组中的对象（p1、p2、p3）均为promise实例（如果不是一个promise，该项会被用`Promise.resolve`转换为一个promise)。它的状态由这三个promise实例决定
 *  返回的结果为一个数组，结果的顺序为和所传入数组的Promise实例对象的顺序是所一一对应的。

##### .race() #####

*  `Promise.all()` 并发处理多个异步任务，只要有一个任务完成就能得到结果。
 *  `Promise.race`方法同样接受一个数组作参数。当p1, p2, p3中有一个实例的状态发生改变（变为`fulfilled`或`rejected`），p的状态就跟着改变。并把第一个改变状态的promise的返回值，传给p的回调函数
 *  返回的结果为一个数组，结果的顺序为和所传入数组的Promise实例对象的顺序是所一一对应的。

<script type="text/javascript"> /* Promise常用API-对象方法 */ // console.dir(Promise) function queryData(url) { return new Promise(function(resolve, reject){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState != 4) return; if(xhr.readyState == 4 && xhr.status == 200) { // 处理正常的情况 resolve(xhr.responseText); }else{ // 处理异常情况 reject('服务器错误'); } }; xhr.open('get', url); xhr.send(null); }); } var p1 = queryData('http://localhost:3000/a1'); var p2 = queryData('http://localhost:3000/a2'); var p3 = queryData('http://localhost:3000/a3'); Promise.all([p1,p2,p3]).then(function(result){ // all 中的参数 [p1,p2,p3] 和 返回的结果一 一对应["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"] console.log(result) //["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"] }) Promise.race([p1,p2,p3]).then(function(result){ // 由于p1执行较快，Promise的then()将获得结果'P1'。p2,p3仍在继续执行，但执行结果将被丢弃。 console.log(result) // "HELLO TOM" }) </script>

--------------------

如果您也正在学习前端的路上，记得关注该博主，学习更多关于前端的知识~

[博主主页 Poetic Code][Poetic Code]

[Poetic Code]: https://blog.csdn.net/weixin_44253336

发表评论取消回复

表情：

评论列表（有 0 条评论，124人围观）

还没有评论，来说两句吧...

相关阅读

相关 ES6 Promise用法小结

目录 1.什么是Promise？我们用Promise来解决什么问题？ 2.es6 promise用法大全 2.1、then 链式操作的用法 2. 2、reject的用

朴灿烈づ我的快乐病毒、/ 2024年04月03日 11:04/ 0 赞/ 158 阅读

相关 ES6 Promise用法总结

1.什么是Promise Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch

女爷i/ 2023年08月17日 17:07/ 0 赞/ 249 阅读

相关 ES6：Promise和Async/Await用法整理

Promise和Async/Await用法整理 2 2018.01.24 21:50:25 字数 1184 阅读 23119 \[详情：\](https://www.j

悠悠/ 2023年08月17日 16:46/ 0 赞/ 156 阅读

相关 ES6 Promise用法总结

目录：一、Promise概述二、使用Promise的好处三、Promise基本用法四、基于Promise发送

偏执的太偏执、/ 2023年07月04日 04:40/ 0 赞/ 125 阅读

相关 ES6 Promise基础知识总结

本文主要参考阮一峰的[ECMAScript 6 入门][ECMAScript 6] 一、Promise是什么？ 1、含义：Promise 表示异步操作的结果，是异步编程

系统管理员/ 2022年12月29日 09:57/ 0 赞/ 331 阅读

相关 ES6之Promise用法解析

一.Promise是什么 promise是一个对象，对象和函数的区别就是对象可以保存状态，函数不可以（闭包除外）并未剥夺函数return的能力，因此无需层层传递ca

以你之姓@/ 2022年12月01日 01:23/ 0 赞/ 334 阅读

相关 ES6 Promise总结

2 Promise 通过Promise对象，将异步操作以同步操作的流程表达出来，避免层层嵌套的回调函数。 2.1 Promise的基本使用 var suc

逃离我推掉我的手/ 2022年11月04日 11:30/ 0 赞/ 307 阅读

相关 ES6 Promise 用法讲解

Promise是一个构造函数，自己身上有all、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。那就new一个 va

旧城等待，/ 2022年10月01日 05:41/ 0 赞/ 263 阅读

相关 ES6 Promise 用法讲解

Promise是一个构造函数，自己身上有all、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。那就new一个 ![复制代码

一时失言乱红尘/ 2021年11月23日 06:08/ 0 赞/ 423 阅读

相关 Es6-promise用法小结

.什么是Promise Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等

╰半橙微兮°/ 2021年11月23日 03:38/ 0 赞/ 484 阅读