es7 promise和async

最新推荐文章于 2023-03-31 10:19:29 发布
最新推荐文章于 2023-03-31 10:19:29 发布
阅读量288 收藏 2
点赞数 1
分类专栏： web前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42701999/article/details/102734682
版权

知识点补充

  1. 对象.then/success:请求成功
    对象.catch：请求失败

  2. 当两个都是resolve时返回resolve的值，如果有reject，返回第一个reject的值

promise

  1. promise对象相当容器 ,产生的结果是异步结果 ,里面封装的是异步编程
  2. 使用：resolve reject 为两个回调函数，分别在成功和失败时返回
/*1.promise*/
  let promise=new Promise(function (resolve,reject) {
      if(true){
          resolve("这里是之后的后台数据");
      }
      else{
          reject("请求失败");
      }
  });
  promise.then(function (res) {
      console.log(res);
  },function(err){
      console.log(err);
  });
  1. 如果其中有定时器，请求成功后的数据返回可以作为计时器的第三个参数
let promise=new Promise(function (resolve,reject) {
    setTimeout(resolve,1000,"data");
});
promise.then(function(res){
    console.log(res);//data
})
  1. 如果要检测异常，则需要使用catch语句处理异常;
    一个promise只能处理一个请求（只能处理一个异步请求）
let promise=new Promise(function (resolve,reject) {
    try{
       if(true){
           setTimeout(resolve,1000,"data");
       }
        else{
           throw new Error("数据请求失败");
       }
    }
    catch(err){
        reject(err);
    }
});
promise.then(function(res){
    console.log(res);//data
}).catch(function (err) {
    console.log(err);
})
  1. promise对象的执行顺序
    原理：异步请求内部的数据在外面也能拿到
let data=null;
let promise=new Promise(function (resolve,reject){
 console.log("start-1");
 setTimeout(resolve,300,"内部的数据-4")
});
console.log("外部-2");
promise.then(function (res){
 console.log(res);
 data=res;
});
console.log("外部结束-3");
console.log(data);// null-5
  1. 异步加载图片
/*3.图片异步加载*/
let promise = new Promise(function (reslove, reject) {
    let img = new Image();
    img.src = "./img/baidu.png";
    img.onload = function () {
        setTimeout(reslove,500,img);
    };
    img.onerror = function (err) {
        reject(new Error("图片加载失败！"))
    };
});
promise.then(function (res) {
    console.log(res);//reslove
}).catch(function (err) {
    console.log(err);
})

在这里插入图片描述
7. 原生ajax promise 封装（将五步法写在promise中并在最后return 一个promise对象）

const post = function (url, data) {
    const promise = new Promise(function (resolve, reject) {
        let http = new XMLHttpRequest();
        let handle = function () {
            if (http.readyState != 4) {
                return;
            }
            if (http.status == 200) {
                resolve(http.response);
            }
            else {
                reject(new Error("数据请求失败"));
            }
        }
        http.open("post", url);
        http.onreadystatechange = handle;
        http.responseType = "json";
        if (data) {
            http.send()
        }
        else {
            http.send();
        }
    });
    return promise;
}
post("stu.json").then(function (res) {
    console.log(res);
}).catch(function (err) {
    console.log(err);
});
  1. 多个promise连用
const p1 = new Promise(function (resolve, reject) {
       setTimeout(resolve, 5000, "第一个数据加载完成");
   });
   const p2 = new Promise(function (resolve, reject) {
       setTimeout(resolve, 1000, p1);
   });
p2.then(function (res) {
 console.log(res);//p2等待p1结束
})
  1. Promise的原型，then和catch，finally
console.log(Promise.prototype);

在这里插入图片描述

（函数的回调函数是他自己的构造函数，其中包含resolve和reject）

  1. Promise.all() ;多个promise对象合并
    在这里插入图片描述

合并promise对象时的返回值没有直接修改p1，而是修改p1点出来的then方法里面的res上

.then会创建一个新的promise；如果直接点p1=new promise(……).then.catch()，相当于let p3=p1.then()，此时输出p1,p3的value为undefined没有值;没有拿到then创建的新的promise的value值

const p1 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 1000, "学生");
}).then(function (res) {
        });
console.log(p1);//value:undefined
const p1 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 1000, "学生");
});
let p3= p1.then(function (res) {

});
console.log(p3);//[[PromiseValue]]: undefined

因为p1,p3都相当于两个没有value值的新的promise对象，而在rerurn内给一个返回值相当于把then方法内部的新的promise对象的返回值给当前定义的promise对象的value；所以就显示成功

Then方法底层源码：

//promise   then的源码
            function Promise(fn) {
               // ...
                this.then = function (onFulfilled, onRejected) {
                    var self = this;
                    return new Promise(function (resolve, reject) {
                        return self.done(function (result) {
                            if (typeof onFulfilled === 'function') {
                                try {
                                    return resolve(onFulfilled(result));
                                } catch (ex) {
                                    return reject(ex);
                                }
                            } else {
                                return resolve(result);
                            }
                        }, function (error) {
                            if (typeof onRejected === 'function') {
                                try {
                                    return resolve(onRejected(error));
                                } catch (ex) {
                                    return reject(ex);
                                }
                            } else {
                                return reject(error);
                            }
                        });
                    });
                }

            }

其中 done方法的源码为：

//    done  源码
            this.done = function (onFulfilled, onRejected) {
                // ensure we are always asynchronous
                setTimeout(function () {
                    handle({
                        onFulfilled: onFulfilled,
                        onRejected: onRejected
                    });
                }, 0); 
            }

例题：

因为then返回了一个新的promise对象，如果下一个then要使用上一个then（即返回的新的promise对象），就要return
res;

const p = new Promise(function (resolve, reject) {
 setTimeout(resolve, 1000, "数据");
}).then(function (res) {//数据  此时已经新建了一个promise对象
         console.log(res);
         return res;
        }).then(function (res) {
         console.log(res);// 数据 输出上一个then新建的promise对象的value值
        }).then(function (res) {
         console.log(res);// undefined 由于上一个then里面没有return,所以此次拿不到新建promise的value值
        });

Async

可以执行多个promise

  1. 异步函数返回值为promise对象，同样使用then catch finally
function getName() {
 const promise = new Promise(function (resolve, reject) {
  try {
   setTimeout(resolve, 500, "张三");
  }
  catch (err) {
   reject(err)
  }
 });
 return promise;
}
function getSex(){
 const promise=new Promise(function (resolve,reject){
  try{
   setTimeout(resolve,1000,"男");
  }
  catch(err){
   reject(err)
  }
 });

 return promise;
}
//async  异步函数返回值为promise对象  then   catch  finally
async function getinfo(){
 const name= await getName();
 const sex=await getSex();
 return {
  name:name,
  sex:sex
 };
}

console.log(getinfo());//promise
getinfo().then(function (res){
 console.log(res);
});
  1. 执行顺序：
    等待promise执行完在继续执行
async function times(val,ms){
 await gettime(ms);
 console.log(val);
}
function gettime(ms){
 return new Promise(function (resolve){
 setTimeout(resolve,ms);
 });
 }
 times("输出",1000);//1000秒后输出
  1. await 命令后边必须是promise（可以直接写也可以间接调用函数里返回值为promise）
 async function getlocal(){
const number=await new Promise(function (resolve,reject){
try{
setTimeout(resolve,1000,1);
}
catch(err){
reject(err);
}
})
console.log(number);
return number;
}
getlocal();
  1. 如果await里面有异常（一个或多个），直接将整体放在try中
    如果await后边的promise返回rejected 直接抓异常抓整个await
    如果多个await之间有继发关系（上一次的await值下一次要用） 就让他们一个一个走
    如果他们之间没有关系可以同时触发（设置计时器时间相同）
async function getlocal(){
let number=null;

try{//抓单个异常
number=await new Promise(function (resolve,reject){
   try{
  setTimeout(resolve,1000,"抓单个异常");
      }
  catch(err){
   reject(err);
     }
})
 }
catch(err){
throw err.message;
}
return number;
}
getlocal().then(function (res){
console.log(res);
});

async function getlocal(){
     try{
     let number=await new Promise(function (resolve,reject){
     try{
     setTimeout(resolve,1000,"多个异常1");
     }
     catch(err){
     reject(err);
     }
     })
     let data=await new Promise(function (resolve,reject){
     try{
     setTimeout(resolve,2000,"多个异常2");
     }
     catch(err){
     reject(err);
     }
     })
     return {
     number:number,
     data:data
     };
     }
     catch(err){
     console.log(err);
     }
     }
     getlocal().then(function (res){
     console.log(res);
     });

继发案例：

function getname(){
 return new Promise(function (resolve){
 setTimeout(resolve,1000,"张三");
 })
 }
 function getsex(name){
 return new Promise(function (resolve){
 setTimeout(resolve,1000,"男");
 })
 }
 function getage(age){
 return new Promise(function (resolve){
 setTimeout(resolve,1000,"18");
 })
 }
 async function getinfo(){
 let name=await getname();
 let age=await getage(name);
 let sex=await getage(age);
 return sex;
 }
 getinfo().then(function (res){
 console.log(res);
 });
ice_bear-
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
三分钟学会用ES7中的Async/Await进行异步编程
08-27
**异步编程与ES7的Async/Await** 在JavaScript中，异步编程是处理I/O操作、网络请求或定时任务的关键。传统的回调函数和Promise模式虽然有效，但在编写复杂的异步逻辑时，代码往往变得难以理解和维护。为了解决这个...
ES7之Async/await的使用详解
10-17
ES6引入的Promise解决了这一问题，而ES7的Async/Await则进一步优化了Promise的使用体验，使得异步代码更接近同步的写法。 首先，我们需要了解Promise。Promise是一个代表未来某个时刻可能完成或失败的操作的对象。...
ES7之：Promise
luxiaopengyou的博客
08-18 398
基本用法 Promise构造函数接受1个异步请求方法（作为方法体），参数有2个，resolve表示请求成功后传回的数据，reject表示请求失败传回的数据。 Promise实例的then方法接受2个函数，第1个函数用于处理请求成功，第2个函数用于处理请求失败，这2个函数的参数分别是请求成功返回的数据、请求失败返回的数据。 ...
ES7——对Promise的优化
没有途径，只有努力
02-14 294
优化Promise 在es6的基础上进行优化 语法 关键词:async //关键词 async 返回值Promise对象 async function task1(){ return 'task1 ...执行成功'; } 返回值为Promise对象 简化then() 关键词:await 注:使用await必须有async修饰函数 示例 async function task2(){ return 'task2 .
详解Promise的 用法(含ES7)
lelara的博客
04-05 608
一、Promise 的基本语法 1 <script> 2 // 基本语法 3 new Promise((resolve, reject) => { 4 // resolve reject本身也是函数 ，如果我们是一个成功的操作（异步操作） 就调用 resolve, 5 ...
Promise的理解和使用,以及ES7中ASYNC/AWAIT 的使用
Mine____的博客
03-11 367
Promise promise 是一个 ES6 的语法 承诺的意思，是一个专门用来解决异步 回调地狱 的问题 回调函数 什么是回调函数？ 就是把函数 A 当作参数传递到 函数 B 中 在函数 B 中以行参的方式进行调用 function a(cb) { cb() } function b() { console.log('我是函数 b') } a(b) 为什么需要...
ES5-ES6-ES7_Promise对象详解
03-26 172
Promise对象概述（什么是Promise） Promise 是异步编程的一种解决方案，比传统的异步解决方案——回调函数和事件——更合理和更强大 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。 Promise 提供统一的 API，各种异步操作都可以用同样的方...
深入理解ES7的async/await的用法
08-29
本文将深入探讨async/await的用法，并与Promise和co模块进行比较。 1. async/await是什么？ async/await可以说是co模块和生成器函数的语法糖，它使用更加清晰的语义解决JavaScript异步代码。async/await返回的是...
ES6-Promise简介、ES7 新特性及ES8新特性-async和await
1900's 88 keys的博客
02-14 977
目录ES6-PromisePromise简介Promise.prototype.then方法Promise.prototype.catch方法ES7 新特性Array.prototype.includes指数操作符ES8新特性-async和awaitasync 和 awaitasync函数await表达式async和await结合读取文件async和await结合发送AJAX请求 ES6-Promise Promise简介 Promise 是ES6引入异步编程的新解决方案。语法上Promise是一个构造函
es6 promise 和 es7 await
fortunegrant的博客
10-20 370
注意！！！ 使用es7 async await presets必须使用stage-3，否则不会执行 1、使用了promise，不使用promise，可以用一个callback，不过如果callback也是一个异步就会形成回调地狱 比如 var a = 0; setTimeout({ a = 1 console.log(a); ...
Promise链式调用和解决回调地狱的ES7终极解决方法async，await
YUSIR 完美CODING世界
05-22 1373
promise链式调用 **then 是成功回调，只要在then后边return一个promise 就可以继续then** <script type="text/javascript"> let p1=new Promise(function(resolve,reject){ setTimeout(function(){ resolve()//成功回调 // reject()//失败回调 },2000)//2秒后执行后边的then、catch函数 }) p
promise对象和es7的异步语法
weixin_47169270的博客
08-17 152
promise解决的问题： 1、js在执行时同步任务会按顺序执行，异步任务会添加到异步队列中等待同步代码执行完后，根据设定的条件开始执行（异步任务排在同步之后，但是同为异步任务不会根据写的位置顺序执行）。 2、异步任务之间若有依赖关系，需要其他异步任务的结果时只能嵌套，为避免回调地狱，故而需要将异步任务中获取结果的区域分离出来。Promise是封装相应的方法和规定，使代码简洁。 获取结果的区域分离的原理 ...
ES6 Promise的用法, ES7async/await异步处理同步化,异步处理进化史
weixin_39891473的博客
03-31 246
promise是解决异步的方法,本质上是一个构造函数,可以用它实例化一个对象.对象身上有resolve、reject、all，原型上有then、catch方法。promise对象有三种状态:pending（初始状态/进行中）、resolved或fulfilled（成功）、rejected（失败）
ES7新特性
weixin_49555741的博客
02-17 600
includes 方法用来检测是否包含某个数组，返回布尔类型值其他检测包含字符串的方法：indexOf（），返回的是下标值，如果没有则返回-1。
传统的回调函数与 ES6中的promise回调以及 ES7 的async/await终极的异步同步化
小淼淼的博客
10-21 1035
传统的回调函数与 ES6中的promise回调以及 ES7 的async/await终极的异步同步化
ES6,7中的 异步,函数回调 与 promise,async,await的使用
qq_43318840的博客
02-08 667
一.基本概念. 1.异步. 所谓异步就是一个任务不能一次性做完,需要分段,做了第一段后,系统去处理其它任务,等到满足一定条件后再执行第二段. 比如,有一个任务是读取文件进行处理,任务的第一段是向操作系统发出读取请求,期间程序执行其他任务,等到操作系统做出响应,再接着执行任务的第二段(读取,处理文件)这种不连续的执行，就叫做异步。(与之对应的是,读取,处理文件过程是不可中断的,是同步任务) 2.回调函数. 回调函数就是js对异步编程的一种实现,把任务的...
ES6中的Promise以及ES7中的async/await
weixin_43242112的博客
06-25 326
Promise以及async/await一、异步编程一、同步API二、异步API三、同步API与异步API的区别二、回调地狱与Promise三、ES7中的async/await 一、异步编程 谈到Promise不得不说这个异步编程的概念，还有涉及到的回调地狱。在JavaScript中API分为同步API和异步API，那么什么是同步API，什么又是异步API呢？ 一、同步API 同步API：只有当前API执行完成后，才能执行下一个API。JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做
es7 Promise和Async await同步操作多个异步方法
weixin_33922670的博客
12-17 3663
一.Promise var p1 = function() { return new Promise((resolve, reject) => { setTimeout(() => { console.log(1000) resolve() }, 1000) }) } var p2 = function...
ES6 Promise和ES7async、await
weixin_53341042的博客
06-24 234
有了Promise之后，异步任务有了一种统一的处理方式 有了统一的处理方式，ES官方就可以对其进一步优化 ES7退出了两个关键字`async`和`await`,用于更加优雅的表达Promise；
Promise 和 async/await
最新发布
06-12
async/await 是 ES7 中新增的语法，它是基于 Promise 实现的一种更加简洁、易读的异步编程方式。使用 async 关键字来定义一个异步函数，然后在函数内部使用 await 关键字来等待 Promise 对象的结果，这样可以避免...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值