ES6-----promise的详细用法

最新推荐文章于 2023-03-24 10:37:06 发布
最新推荐文章于 2023-03-24 10:37:06 发布
阅读量308 收藏 1
点赞数
分类专栏： Ës6 promise WEB前端知识 JavaScript的
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/itwangyang520/article/details/90450673
版权

01.promise基本操作

<!--
    Created by wangyang on 2019-05-22.
    itwangyang@gmail.com
    http://www.itwangyang.xyz
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no">
  <title>Title</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <!--所有的IE都起作用：-->
  <!--[if IE]>  <link rel="stylesheet" type="text/css" href="all-ie-only.css/> <![endif]-->

</head>
<body>



<script>
  /*

    为什么要有promise：解决（回调地狱）的问题

    回调地狱：

        //跟以前的if条件地狱很像
        // if(){
        //     if(){
        //         if(){
        //         }
        //     }
        // }

        $.get("/getUser",function(res){
            $.get("/getUserDetail",function(){
                $.get("/getCart",function(){
                    $.get("/getBooks",function(){
                        //...
                    })
                })
            })
        })

      //node开发：读取文件；开个服务器、接收一个请求、请求路径、访问数据库


  * */


  //把异步操作封装在一个promise对象中
  function fn() {
    return new Promise(function (resolve,reject) {
      setTimeout(()=> {
        console.log("您好");
        //其实异步逻辑，到这款其实已经执行完毕了，就可以告诉外界，可以执行其他操作了，如果让外界得知？
        resolve();
      },1000)
    })
  }

  //调用了这个函数，
  fn().then(res =>{
    //执行到下一步
    console.log("下一步");
    fn().then(res=>{
      console.log("执行第二步")
    })
  })
  //输出顺序：
  //你好
  //下一步
  //你好
  //执行第二步

</script>
</body>
</html>

02-1.promise如任何解决回调地狱的

<!--
    Created by wangyang on 2019-05-22.
    itwangyang@gmail.com
    http://www.itwangyang.xyz
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no">
  <title>Title</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <!--所有的IE都起作用：-->
  <!--[if IE]>  <link rel="stylesheet" type="text/css" href="all-ie-only.css/> <![endif]-->

</head>
<body>



<script>
  function f1() {
    return new Promise(resolve => {
      setTimeout(()=>{
        console.log("第一步");
        //异步逻辑已经执行完，必须要告诉外界我执行完了
        resolve();
      },1000)
    })
  }

  function f2() {
    return new Promise(resolve => {
      setTimeout(()=>{
        console.log("第二步");
        //异步逻辑已经执行完，必须要告诉外界我执行完了
        resolve();
      },1000)
    })
  }

  f1().then(res=>{
    //返回一个新的promise对象，然后链式调用then方法
    return f2();
  }).then(res=>{
   return f1();
  }).then(res=>{
    return f2();
  }).then(res=>{
    console.log("结束");
  })




  /*
  Promise函数基本用法

    var promise=new Promise((resolve,reject)=>{
        //b 把需要执行的异步操作放在这里
        $.get("/getUser",res=>{
            //获取数据的异步操作已经执行完毕了，等待下一步的执行，通过执行resolve函数，告诉外界你可以执行下一步操作了
            //c、
            resolve(res)
            //而执行的下一步操作，其实就是写在then的回调函数中的
        })
    })
    //a、
    promise.then(res=>{
        //d、执行后续的操作
        console.log(res);
    })

   */


</script>
</body>
</html>

03-2.promise传参

<!--
    Created by wangyang on 2019-05-22.
    itwangyang@gmail.com
    http://www.itwangyang.xyz
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no">
  <title>Title</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <!--所有的IE都起作用：-->
  <!--[if IE]>  <link rel="stylesheet" type="text/css" href="all-ie-only.css/> <![endif]-->

</head>
<body>



<script>
  function getUser() {
    return new Promise(resolve => {
      $.get("/getUser",res=>{
        //res是从服务端中接收到的数据
        //把数据传到下一步操作中
        //告诉外界本次的异步操作已经执行完毕了
        resolve(res);
      });

    })
  }
  getUser().then(res=>{
    //res就表示上一个异步操作返回的参数值：从服务器中获取的数据
  })
</script>
</body>
</html>

03-3 promis错误处理

<!--
    Created by wangyang on 2019-05-22.
    itwangyang@gmail.com
    http://www.itwangyang.xyz
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no">
  <title>Title</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <!--所有的IE都起作用：-->
  <!--[if IE]>  <link rel="stylesheet" type="text/css" href="all-ie-only.css/> <![endif]-->

</head>
<body>



<script>
  function getBook() {
    return new Promise((resolve,reject) => {
      $.ajax({
        url:'/getBook',
        success(res){
          //成功获取数据
          resolve(res);//resolve();表示异步操作是成功的
        },
        error(resError){//res表示错误信息
          //如果失败就会执行
          reject(resError);//reject();表示异步操作是失败的
        }
      });
    })
  }

/*  //第一种处理错误的方式
  getBook().then(res=>{
    //这里的res是表示请求成功时候获取到的数据
  },resError=>{
    console.log(resError);
  });
  */


  //第二种处理错误的方式
  getBook().then(res=>{
    //成功了
  }).catch(res=>{
    //这里也可以获取到错误信息
  })

  //上面2种错误处理的方式，第二种更加推荐
  //第二种方式更强大的地方在于：
  //a、不仅仅可以捕获到reject传递的参数
  //b、还可以捕获到：成功的回调中发生的错误
</script>
</body>
</html>

04-4.promise捕获错误

<!--
    Created by wangyang on 2019-05-22.
    itwangyang@gmail.com
    http://www.itwangyang.xyz
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no">
  <title>Title</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <!--所有的IE都起作用：-->
  <!--[if IE]>  <link rel="stylesheet" type="text/css" href="all-ie-only.css/> <![endif]-->

</head>
<body>



<script>
  function f1(name) {
    return new Promise((resolve,reject) => {
      setTimeout(()=>{
        if (name == "a"){
          resolve("成功");
        } else {
          reject("失败");
        }
      },1000)
    })
  }

  // f1("a").then(res=>{console.log(res)});
  f1("b").then(res=>{
    console.log(res)
  }).catch(res=>{
    console.log("失败了");
  })





</script>
</body>
</html>

05-5.promise多层异步使用catch

<!--
    Created by wangyang on 2019-05-22.
    itwangyang@gmail.com
    http://www.itwangyang.xyz
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no">
  <title>Title</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <!--所有的IE都起作用：-->
  <!--[if IE]>  <link rel="stylesheet" type="text/css" href="all-ie-only.css/> <![endif]-->

</head>
<body>



<script>
  new Promise((resolve,reject)=>{
    setTimeout(()=>{
      console.log("第一步");
      resolve("第一步完成");
    },100)
  }).then(res=>{
    console.log(res);
    return new Promise((resolve, reject) => {
      setTimeout(()=>{
        console.log("第二步");
        reject("第二步失败");
      },100)
    })
  }).then(res=>{
    console.log(res);
    console.log("不会执行到这里");
  }).catch(res=>{
    console.log(res);
    console.log("失败");
  });


  //fetch是新浏览器自带的。。。。。。。。。。。。。。。。
  //axios就是一个基于Promise封装出来的进行ajax请求的库
  axios.get("/getUser").then(res=>{
    return axios.get("/getUserDetail");
  })
</script>
</body>
</html>

06-6.promise里面的返回值

<!--
    Created by wangyang on 2019-05-22.
    itwangyang@gmail.com
    http://www.itwangyang.xyz
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no">
  <title>Title</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <!--所有的IE都起作用：-->
  <!--[if IE]>  <link rel="stylesheet" type="text/css" href="all-ie-only.css/> <![endif]-->

</head>
<body>



<script>
  new Promise((resolve, reject)=>{
    setTimeout(()=>{
      resolve("第一步");
    },1000)
  }).then(res=>{
    return 100;
  }).then(res=>{
    console.log(res);
  })
</script>
</body>
</html>

promise,暂时写到这些，目前就是用到这些

itwangyang520
关注
专栏目录
ES6 Promise用法小结
涂涂
07-25 39万+
目录 1.什么是Promise reject的用法 catch的用法 all的用法 race的用法 1.什么是Promise Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。 Promise对象有以下两个特点。 （1）对象的状态不受外界影响。Promise对象代表一个异步操...
ES6-Promise用法
qq_45962090的博客
10-26 100
目录一、概述1.1 什么是Promise?1.2 为什么要使用Promise?1.2.1 案例二、异步操作阶段三、Promise 状态3.1 状态的特点3.2 状态的缺点四、Promise的基本用法4.1 基本用法4.2 基本API4.2.1 .then()4.2.2 .catch() 一、概述 1.1 什么是Promise? 是异步编程的一种解决方案。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。 1.2 为什么要使用Promise? 1.2.1 案例 request('test1.
ES6中Promise用法及理解
weixin_46995731的博客
10-10 1365
ES6中Promise用法及理解 promise就是个构造函数，参数为一个函数 构造函数一般使用其实例进行操作，如何得到一个构造函数的实例呢？ 1、new Promise（参数:函数）； 2、参数为一个函数，这个函数同样也有两个参数 resolve reject，这两个参数也是函数 resolve执行后返回promise的成功状态， reject执行后返回promise的错误状态 基本使用形式： var p = new Promise(function(resolve,reject){
es6的promise用法详解
Frankltf的博客
05-04 468
&#13; es6的promise用法详解 promise 原理 promise是es6的异步编程解决方案， 是es6封装好的对象； 一个promise有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和Rejected（已失败）； 缺点：一旦执行无法取消；无回掉函数，promise只在内部报错；当处于pending状态时无法监控其...
ES6关于Promise的用法详解
weixin_33919941的博客
11-22 62
　　Node的产生，大大推动了Javascript这门语言在服务端的发展，使得前端人员可以以很低的门槛转向后端开发。 当然，这并不代表迸发成了全栈。全栈的技能很集中，绝不仅仅是前端会写一些HTML和一些交互，后台熟悉数据库的增删查改。　　　　想必接触过Node的人都知道，Node是以异步(Async)回调著称的，其异步性提高了程序的执行效率，但同时也减少了程序的可读性。如果我们有几个异步操作，并且...
ES6 之 Promise用法
Hy_0452的博客
03-04 957
1. 为什么使用Promise 解决回调函数中嵌套函数(回调地狱) 2.Promise的基本使用 Promise是一个构造函数，通过new关键字实例化对象 语法 new Promise((resolve， reject) =>{}) Promise接受一个函数作为参数 在参数函数中接收两个参数 resolve：成功函数 reject：失败函数 promise实例有两个属性 state: 状态 result: 结果 1）promise的状态 第一种状态：pending(准备，待
ES6中promise的用法详解
weixin_57959921的博客
03-24 1441
ES6中promise的用法详解
前端开源库-es6-promise-pool
08-29
**前端开源库——ES6 Promise Pool** 在现代前端开发中，异步操作是不可或缺的一部分，Promise作为JavaScript中处理异步操作的重要工具，极大地改善了代码的可读性和可维护性。然而，当需要同时处理大量异步任务时...
es6-promise@4.1.1.zip
06-18
**ES6 Promise 深入理解与应用** 在JavaScript中，由于其单线程的特性，同步执行的代码会按照顺序依次处理，这在处理I/O密集型任务时容易导致阻塞，使得用户界面无法及时响应。为了解决这个问题，Promise（承诺）...
前端开源库-es6-promisify-all
08-30
`es6-promisify-all` 是一个前端开源库，旨在帮助开发者将所有非 Promise 的异步方法转换为 Promise 形式，从而更好地利用 ES6 的 Promise 特性。 `Promise` 是一种状态管理机制，它有三种状态：pending（等待中）...
前端项目-es6-promise.zip
09-02
创建Promise有两种方式：使用构造函数`new Promise()`和使用静态方法`Promise.resolve()`和`Promise.reject()`。构造函数接受一个执行器函数，该函数接收两个参数，即resolve和reject，分别用于改变Promise的状态。 ...
es6-promise（微信小程序等引用）
03-09
**ES6 Promise 知识详解** Promise 是 ES6 引入的一种异步编程解决方案，它在 JavaScript 中扮演着处理异步操作的重要角色，特别是在微信小程序等需要高效管理异步流程的场景中。Promise 对象代表一个异步操作的...
ES6 之Promise的使用
m0_48982503的博客
12-03 578
(一) Promise promise是承诺，允诺的意思。(是将来发生的事) (1) Promise是什么？ 从用途上来说： (1) promise主要用于异步计算。 (2) 可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果。 (3) 可以在对象之间传递和操作promise，帮助我们处理队列。 从语法上说： Promise 是一个对象，从它可以获取异步操作的消息。 Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理 executor是执行器，执行者的意
【ES6】Promise用法
Dream_Lee的博客
02-26 617
promise理解及使用Promise解决的问题——异步Promise的基本用法异步操作拒绝及中断调用链ES6对Promise/A+的扩展Promise.all的扩展Promise.race的扩展 众所周知的，Javascript是一种单线程的语言，所有的代码必须按照所谓的“自上而下”的顺序来执行。本特性带来的问题就是，一些将来的、未知的操作，必须异步实现（关于异步，我会在另一篇文章里进行讨论）...
ES6之Promise用法解析
lss0555的博客
08-25 221
一.Promise是什么 promise是一个对象，对象和函数的区别就是对象可以保存状态，函数不可以（闭包除外） 并未剥夺函数return的能力，因此无需层层传递callback，进行回调获取数据 主要用于异步计算 可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果 可以在对象之间传递和操作promise，帮助我们处理队列 代码风格，容易理解，便于维护，多个异步等待合并便于解决 二.实例用法 1.简单用法 new Promise(function(resolve, reject) {
ES6 Promise 的基本用法
小呀嘛麻的博客
08-21 232
标语 平时积累的零碎的知识，要达到灵活应用的程度，还需要将其系统化。 注：此为记录贴。 什么是 Promise Promise 是抽象异步处理对象及对齐做各种操作的组件。 getAsync("fileA.txt", function(error, result){ if(error){// 取得失败时的处理 throw error; } // 取得成功时的处理 }); Node.js 在处理异步时，回调函数中的第一个参数一定是 error ，但是怎么操作 er.
ES6 Promise用法总结
Potry Code的博客
02-08 1400
目录：一、Promise概述二、使用Promise的好处三、Promise基本用法四、基于Promise发送Ajax请求五、Promise 基本API实例方法.then().catch().finally()静态方法.all().race() 一、Promise概述 简单的来讲，Promise就是异步编程的一种解决方案。从语法上讲，Promise是一个对象，从它可以获取到异步操作的消息。 二、使...
ES6 promise用法以及简单实例
ZhaoYulin6的博客
09-28 349
Promise 定义： Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理且更强大。它最早由社区提出并实现，ES6将其写进了语言标准，统一了用法，并原生提供了Promise对象。 Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息（结果:异步程序是否执行完毕）。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。 语法 new Prom
web前端：Canvas 基础（一）
热门推荐
itwangyang520的博客
11-01 3万+
web前端：Canvas 基础（一）
可以 使用es6-promise插件来弄吗
最新发布
05-24
是的，你可以使用es6-promise插件来实现Promises。es6-promise是一个符合Promises / A +规范的Promise库，它提供了一个兼容性较好的Promise实现，并且支持所有主流浏览器和Node.js环境。你只需要在你的项目中引入es6...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值