promise & async await

最新推荐文章于 2024-03-27 16:22:07 发布
最新推荐文章于 2024-03-27 16:22:07 发布
阅读量86 收藏
点赞数
分类专栏： JavaScript 前端 文章标签： javascript 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hello_world_XXL/article/details/121111268
版权 
<!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">
  <title>Document</title>
</head>
<body>
  <script>
    // promise 是用于解决回调低于的
    /*
    * promise 的状态：
    * 待定(pending)，初始状态，既没有被兑现，也没有被拒绝。 
    * 已兑现(fulfilled)，操作完成
    * 已拒绝(rejected)，操作失败
    */

    const isA = true
    const isB = true
    const isC = true
    const isD = true
    function A(){
      return new Promise((resolve,reject)=>{
        console.log(`执行接口 A 的逻辑`)
        setTimeout(()=>{
          if(isA){
            resolve(`接口 A 执行完成`)
          }else{
            reject(`接口 A 执行失败`)
          }
        },1 * 1000)
      })
    }
    function B(){
      return new Promise((resolve,reject)=>{
        console.log(`执行接口 B 的逻辑`)
        setTimeout(()=>{
          if(isA){
            resolve(`接口 B 执行完成`)
          }else{
            reject(`接口 B 执行失败`)
          }
        },1 * 1000)
      })
    }
    function C(){
      return new Promise((resolve,reject)=>{
        console.log(`执行接口 C 的逻辑`)
        setTimeout(()=>{
          if(isA){
            resolve(`接口 C 执行完成`)
          }else{
            reject(`接口 C 执行失败`)
          }
        },1 * 1000)
      })
    }
    function D(){
      return new Promise((resolve,reject)=>{
        console.log(`执行接口 D 的逻辑`)
        setTimeout(()=>{
          if(isA){
            resolve(`接口 D 执行完成`)
          }else{
            reject(`接口 D 执行失败`)
          }
        },1 * 1000)
      })
    }
    //链式调用
    A()
    .then(res=>{
      console.log(res)
      return B()
    })
    .then(res=>{
      console.log(res)
      return C()
    })
    .then(res=>{
      console.log(res)
      return D()
    })
    .then(res=>{
      console.log(res)
    })
  </script>
</body>
</html>
<!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">
  <title>Document</title>
</head>
<body>
  <script>
    const isA = true
    const isB = true
    const isC = true
    const isD = true
    function A(){
      return new Promise((resolve,reject)=>{
        console.log(`执行接口 A 的逻辑`)
        setTimeout(()=>{
          if(isA){
            resolve(`接口 A 执行完成`)
          }else{
            reject(`接口 A 执行失败`)
          }
        },1 * 1000)
      })
    }
    function B(){
      return new Promise((resolve,reject)=>{
        console.log(`执行接口 B 的逻辑`)
        setTimeout(()=>{
          if(isA){
            resolve(`接口 B 执行完成`)
          }else{
            reject(`接口 B 执行失败`)
          }
        },1 * 1000)
      })
    }
    function C(){
      return new Promise((resolve,reject)=>{
        console.log(`执行接口 C 的逻辑`)
        setTimeout(()=>{
          if(isA){
            resolve(`接口 C 执行完成`)
          }else{
            reject(`接口 C 执行失败`)
          }
        },1 * 1000)
      })
    }
    function D(){
      return new Promise((resolve,reject)=>{
        console.log(`执行接口 D 的逻辑`)
        setTimeout(()=>{
          if(isA){
            resolve(`接口 D 执行完成`)
          }else{
            reject(`接口 D 执行失败`)
          }
        },1 * 1000)
      })
    }

    async function test(){
      const resA = await A()
      console.log(resA)
      const resB = await B()
      console.log(resB)
      const resC = await C()
      console.log(resC)
      const resD = await D()
      console.log(resD)
    }
    test()
  </script>
</body>
</html>

真不可思议
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js代码-Promise & async/await
07-16
在JavaScript的世界里，Promise和async/await是处理异步操作的关键工具。它们为开发者提供了更加优雅和可读的方式来管理回调函数的嵌套地狱，也就是常说的"回调地狱"。Promise和async/await都是ES6引入的新特性，极...
Promise Async+await实现原理及案例分析
04-03
Promise Async+await实现原理及案例分析
promise、async、await
weixin_43254676的博客
12-31 159
一、promise 1.1 promise有2个特性 promise 只有三个状态 pending(进行中)、resolved(已完成)、rejected(已失败)，一旦开始执行就不能被打断或终止。 状态的变化只能从 pending→ resolved 或 pending→rejected 1.2 promise的声明 const promise = new Promise( function...
promise 与 await
qq_36760651的博客
04-21 428
async function async1() { console.log("async1 start"); await async2(); const newPromise6 = new Promise(function(resolve, reject) { resolve(console.log('promise11111')); }).then(() => {cons...
终于理清楚了Promise以及async和await
KAMHUNCHAN的博客
02-17 4281
promise理解： 1，是js异步编程的新的解决方案 2，是一个构造函数 3，用来封装一个异步操作，并可以获得其结果 promise三个状态： 1，pendding 未确定 2，resolved 成功 3，rejected 失败 注：状态只能改变一次，成功数据称为value，失败称为reason promise的基本使用 为什么要用Promise： 1.指定回调函数的方式灵活，可以在异步任务前指定也可以在异步任务后指定，而以前指定回调函数必须在异步任务开始前指定。 2.支持链式调用，可以解决
ES6/7/8新特性Promise,async,await,fetch带我们逃离异步回调的深渊
热门推荐
wang839305939的博客
07-20 1万+
Promise,async,await,fetch解决js中的异步请求问题
javaScript中的await和Promise
weixin_37328901的博客
05-09 1947
Promise 首先先说说Promise，多个异步调用可以用promise链式方法来很直观的表示。 doSomething().then(function(result) { return doSomethingElse(result); }) .then(function(newResult) { return doThirdThing(newResult); }) .then(f...
Async/Await替代Promise的6个理由
10-16
与Promise相比，Async/Await提供了一种更加直观和易于理解的方式来处理异步编程。本文将详细介绍为何Async/Await可以替代传统的Promise，并通过具体的代码示例来展示其优势。 首先，我们需要了解Async/Await是建立...
async/await与promise（nodejs中的异步操作问题）
10-20
通过使用`async/await`和Promise，我们可以以线性的方式编写异步代码，这避免了回调地狱，代码结构更加清晰。 ```javascript async function request() { try { const result = await doSomething(); const ...
await搭配promise使用
huangmin113659的专栏
06-21 2870
<template> <div> <span>{{ x }}</span> <br> <span>{{ y }}</span> <br> <h1>-----------</h1> <button @click="foo">clic...
Promise详解及Async/Await
最新发布
weixin_44446127的博客
03-27 2303
await后面跟一个Promise对象，它会“等待”这个Promise对象变为fulfilled状态，并返回其结果。更灵活的异步操作组合：Promise支持多个异步操作的组合，比如通过Promise.all()等待所有异步操作完成，或者通过Promise.race()只等待第一个完成的异步操作。更好的错误处理：Promise提供了.catch()方法，用于捕获异步操作过程中发生的错误。Promise是es6中引入的一个新的对象，用于表示一个异步操作的最终完成（或失败）及其结果值。
Async/await和promise
子敬的技术博客
12-11 453
Async/await和promise 参考： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function   Promise 来自ES6，在ES7中推出了Async和Awiat去和promise进行配合是用。这样做的目的是让几个有步骤的异步任务最重以对应的顺序执
Promise - async await的基本用法以及使用陷阱，高效使用技巧
程序员阿甘的博客
12-07 3930
基本用法 async关键字用于修饰一个函数，被修饰的函数会变为异步函数 这里的异步函数，并不是指async函数执行是异步的，而是指async函数会返回一个promise对象 async函数返回的promise对象的状态和结果取决于async函数的return值或抛出的异常 若return值为非promise对象，则async函数返回一个成功态的promise对象，其结果为return值 若return值为promise对象，则async函数返回一个新的promise对象，其状态和..
async 和await，promise用法
dqwdnishi的博客
10-09 250
基本规则 1、 async 表示这是一个async函数，await只能用在这个函数里面。 2、 await 表示在这里等待promise返回结果了，再继续执行。 3、await 后面跟着的应该是一个promise对象（当然，其他返回值也没关系，只是会立即执行，不过那样就没有意义了…） async和promise都是异步方法，区别是async生成的结果是promise对象，async是promise的终结版。 await只能在async中使用，await是阻塞的意思，就是暂停，你一起调用2个接口，第一个执行完
async / await 与 Promise
yechongchong的博客
07-24 290
await 操作符用于等待一个Promise对象。它只能在异步函数async function中使用。
Promise、Async/Await 详解
m0_61663332的博客
08-03 3358
Promise、Async/Await 详解，Promise的参数resolve和reject、回调函数.then 和.catch和方法 .all() 和 .race()的使用。以及语法糖async/await的使用方法。
异步编程Promise async/await
weixin_42340514的博客
07-24 172
异步编程的终极解决方案 async/await 异步编程 Promise：从使用到手写实现 //Generator 函数（生成器函数） //Generator 生成器也是通过同步的方式写异步代码的，也可以解决回调地狱的问题， //function后面，函数名之前有个 *,用来表示函数为 Generator 函数,不然会报错 //在 Generator 函数内部执行一段代码，如果遇到 yield 关键字，那么 JS 引擎将返回关键字后面的内容给外部，并暂停该函数的执行。
async/await 和 promise 的用法
子敬的技术博客
07-02 4130
async/await 和 promise 的用法 参考：https://www.jianshu.com/p/ffa5cbe9ab29 async/await ”vs“ promise 写法： Promise主要用then函数的链式调用，一直点点点，是一种从左向右的横向写法。 async/await从上到下，顺序执行，就像写同步代码一样。这更符合人编写代码的习惯 参数数量 Promis...
Promise和Async/Await用法整理
极客神殿
05-27 440
1.Promise 1.简介 Promise,简单来说就是一个容器，里面保存着某个未来才会结束的时间(通常是一个异步操作的结果) Promise对象的基本语法： new Promise((resolve,reject) => { //… }); 从语法上来说，Promise是一个对象，从它可以获取异步操作的消息。 基本语法： let p = new Promise((resolve,reje...
Promise/async await
09-14
Promise 和 async/await 是 JavaScript 中处理异步操作的两种方法。 Promise 是一个表示异步操作的对象，它可以有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。通过 Promise，我们可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值