ES6-18【异步的开端-promise】

已于 2022-05-04 20:26:16 修改
阅读量209 收藏
点赞数
分类专栏： # ES6 文章标签： javascript 前端
于 2022-05-03 16:20:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42647547/article/details/124524059
版权

一、异步的开端

  1. JS执行机制

    JS是单线程的语言，所以会有代码阻塞，要想避免代码阻塞就得通过异步，而异步的实现原理就是通过事件环，它会把异步任务寄托到浏览器，浏览器将异步任务处理完后会将其推送到任务队列，等JS主线程执行完毕后，会一个一个执行任务队列里的异步任务。

  2. 异步存在的问题

    1. 回调地狱 —— 难于维护，不便拓展

      呈现倒三角的写法就是回调地狱

      let fs = require('fs');
fs.readFile('./name.txt','utf-8',(err,data)=>{
	console.log(data); 				// ./number.txt
    if(data){
        fs.readFile(data,'utf-8',(err,data)=>{
            console.log(data); 		// score.txt
            fs.readFile(data,'utf-8',(err,data)=>{
                console.log(data);  // 90
            })
        })
    }
})

    2. try-catch —— 难以捕获异常

      只能捕获同步异常，无法捕获异步错误

      直接报错

      try {
    setTimeout(()=>{
        console.log(a); // Uncaught ReferenceError: a is not defined
    },90)
} catch (e) {
    console.log(e); 
}

      捕获不到

      let fs = require('fs');
try {
    fs.readFile('./nam.txt', 'utf-8', (err, data) => {
        if (err) {
            console.log(err);
            // [Error: ENOENT: no such file or directory, open 'C:\Users\21757\Desktop\ES6\nam.txt'] {
			//     errno: -4058,
			//     code: 'ENOENT',
			//     syscall: 'open',
			//     path: 'C:\\Users\\21757\\Desktop\\ES6\\nam.txt'
			//   }
        }
    });
} catch (e) {
    console.log(e);
}

    3. 同步并发异步任务 —— 没法判断谁先执行

      每一个异步函数中都要加入 arr.length === 3 && show(arr) 判断是否读取完

      let fs = require('fs');   
let arr = []
function show(data){
    console.log(data);
}
fs.readFile('./name.txt','utf-8',(err,data)=>{
    if(data){
        arr.push(data)
    }
    arr.length === 3 && show(arr);
})
fs.readFile('./number.txt','utf-8',(err,data)=>{
    if(data){
        arr.push(data)
    }
    arr.length === 3 && show(arr);
})
fs.readFile('./score.txt','utf-8',(err,data)=>{
    if(data){
        arr.push(data)
    }
    arr.length === 3 && show(arr);
})
// ['./number.txt','scores.txt','90']

  3. promise演变历史

    1. Callbacks() —— 管理回调列表（已过时）

      在jquery中可以通过 add 方法将异步任务推到 Callbacks 里面进行管理

      // 引入JQuery
let cb = $.Callbacks();
function a(x,y){
    console.log('a',x,y)
}
function b(x,y){
    console.log('b',x,y)
}
cb.add(a,b); //添加异步方法
cb.fire(10,20); //执行所有异步
//a 10 20
//b 10 20

    2. deferred（即将淘汰）

      底层是通过 Callbacks 管理当前的回调，实现异步的管理

      缺点：可以显示调用 reject，于是采用 promise 来解决，这就是 promise 的由来

      function waitHandle(){
    var dtd = $.Deferred(); //创建一个 deferred 对象；
    var wait = function(dtd){ //传入一个 deferred 的对象
        var task = function(){ 
            console.log('执行完成');
            dtd.resolve(); //表示异步任务已经完成
            // dtd.reject(); //表示异步任务失败或出错；打印失败的回调
        }
        setTimeout(task,2000);
        // return dtd; //里层函数，返回 deferred 对象
        return dtd.promise(); //注意，这里返回的是 promise 而不是直接返回 deferred
    }
    // 外层函数返回 里层函数的执行结果
    return wait(dtd)
}
var w = waitHandle();
console.log(w);

//w.done(function(){
//	console.log('ok');
//}).fail(function(){
//	console.log('err');
//}); // 执行完成  ok

// w.reject(); // deferred弊端：deferred 对象可以显示调用 reject 方法，而 promise 对象无法调用 
w.then(function(){
	console.log('ok');
}).fail(function(){
	console.log('err');
}); // 执行完成  ok

    3. promise A+规范

      本身是社区的一个规范，用于定义 promise 的用法，最后被囊括在了es6

二、promise

  1. promise初识

    是一种异步操作，js内置的构造函数

    参数是一个函数（executor 执行者）

    console.log(new Promise(function(resolve,reject){})); 
// Promise {<pending>}
// [[Prototype]]: Promise
// catch: ƒ catch()
// constructor: ƒ Promise()
// finally: ƒ finally()
// then: ƒ then()
// Symbol(Symbol.toStringTag): "Promise"
// [[Prototype]]: Object
// [[PromiseState]]: "pending"
// [[PromiseResult]]: undefined

  2. 同步执行

    new Promise(function(resolve,reject){
	console.log('promise');
});
console.log(1);
// 'promise' 1

  3. 三种状态

    1. panding（进行中）
    2. fufilled（也叫resolve）（已成功）
    3. reject（已失效）

    两个过程：padding - resolve、padding - reject，promise的resolve、reject代表的是这两个过程

  4. 两个特征

    1. 对象的状态不受外界影响（唯一能影响的就是当前它所代表的异步事件）
    2. 状态不可逆（promise固化以后，再对promise对象添加回调，是可以直接拿到这个结果的，如果说是事件的话，一旦错过了，就是真的错过了）

  5. executor参数

    通过调用resolve、reject方法，改变当前的异步操作的状态，并调用绑定回调函数

  6. 绑定回调函数

    当 promise 的状态发生变化时调用

    通过 then 方法绑定状态为成功或者失败的回调函数

    参数：注册成功回调 / 注册失败回调

    let promise = new Promise((resolve,reject)=>{
   setInterval(function(){
       Math.random()*100 >60 ? resolve('ok'):reject('no');
   },30);
   
})
promise.then((val)=>{
    console.log(val);
    
},(reason)=>{
    console.log(reason);
})
//随机的ok no

    通过promise代表当前的异步任务，当异步任务完成以后调用相应的方法来改变promise当前的状态，并调用promise通过.then的方式绑定的回调函数

  7. 执行顺序

    promise里面是同步执行

    而resolve、reject是promise的异步操作，执行会改变当前promise的状态，调用绑定的回调函数

    let promise = new Promise((resolve,reject)=>{
      console.log(0);
      resolve('1'); // 异步操作，调用的回调属于异步任务
       
   })
    promise.then((val)=>{
        console.log(val);
        
    },(reason)=>{
        console.log(reason);
    })
console.log(2);
// 先执行主线程任务 0 2 再执行任务队列当中的 1

    当有两个异步任务时

    setTimeout(function(){
    console.log('SET TIME');
},30);
let promise = new Promise((resolve,reject)=>{
  console.log(0);
  resolve('1');
});
promise.then((val)=>{
    console.log(val);
},(reason)=>{
    console.log(reason);
});
console.log(2);
//0 2 1 SET TIME

    JS异步代码中，

    分为宏任务(宏任务队列)，

    微任务(微任务队列)：promise、process.nextTick() 优先级更高（除了这两个其它都是宏任务）

    Promise.resolve().then(()=>{ //在executor里面调用是等效的
    console.log('promise1');
    setTimeout(()=>{
        console.log('setTime2'); 
    })
})
setTimeout(()=>{
    console.log('setTime1');
    Promise.resolve().then(()=>{
        console.log('promise2');
        
    })
})
//第一轮：promise1 setTime1 第二轮：promise2 setTime2

  8. 链式调用

    then默认返回promise对象，所以可以链式调用

    let promise = new Promise(function(resolve,reject){
    setInterval(function(){
        Math.random * 100 > 60 ? resolve('ok') : reject('no');
    },30)
})
promise.then((val)=>{
    console.log(val)
},(reason)=>{
    console.log(reason)
}).then((val)=>{ // 因为上一个默认promise没有传值，所以这里val是undefined
    console.log(val);
},(reason)=>{
    console.log(reason);
})
//no undefined

    第一次then的返回值作为下一次then的执行参数

    let promise = new Promise(function(resolve,reject){
    setInterval(function(){
        Math.random() * 100 > 60 ? resolve('ok') : reject('no');
    },30)
});
promise.then((val)=>{
    console.log(val)
    return 3;
},(reason)=>{
    console.log(reason)
    return 2;
}).then((val)=>{
    console.log(val);
},(reason)=>{
    console.log(reason);
});
// ok 3 or no 2

    如果第一次就return一个新的Promise 那么就会调用第二个then，参数就自动获取resolve中的了

    let promise = new Promise(function(resolve,reject){
    setInterval(function(){
        Math.random() * 100 > 60 ? resolve('ok') : reject('no');
    },30)
})
promise.then((val)=>{
    console.log(val)
    return new Promise((resolve,reject)=>{
        resolve('newPromise')
    })
},(reason)=>{
    console.log(reason)
    return new Promise((resolve,reject)=>{
        reject('rejectPromise')
    })
}).then((val)=>{
    console.log(val);
},(reason)=>{
    console.log(reason);
})
//ok newPromise or no rejectPromise
小管打天下
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
es6-promise
04-02
es6-promise.auto.js ,可用于微信小程序开发，小程序里需要
es6-promise.auto.js
10-31
<!-- Automatically provides/replaces `Promise` if missing or broken. --> [removed][removed] ...-- Minified version of `es6-promise-auto` below. --> [removed][removed] [removed][removed]
ES6-18/19 异步的开端-promise
Stephy_Yy
07-25 104
ES6-18异步的开端-promise ES6-19 promise的使用方法和自定义promisify try catch只能捕获同步异常，不能捕获异步的 等待所有异步都执行完，打印结果，比较笨拙的方法，在每个异步操作加arr.length === 3 && show(arr) Promise是构造函数 原型上的方法then、catch、finally 其余都在构造函数上：all、race、reject、resolve 实例化的参数executor是一个函数 exe
C语言内嵌Es6,自己动手实现ES6 Promise
weixin_39897070的博客
05-21 150
不管是标准还是实现，现在Javascript的重心都放在了async-await上，Promise怎么看都像过时的东西。而且支持Promise的库有一大堆，就算不需要这些库，今天的浏览器和Node.js也已经原生支持Promise了。在这种前提下，为什么还要自己去实现一个Promise呢？ES7的async-await建立在Promise上客观来讲，由于await本身的特点，将来JS把底层API良...
Promise + ajax + ES6
阿宝的博客
03-11 78
前端噩梦的开端---前后端交互
es6 promise知识点 王者段位前来挑战
hjseo_seg的博客
02-26 108
关于promise的知识点，暂且分为 青铜、白银、黄金、铂金、钻石、星耀、王者这几个段位。可能是王者玩多了吧，你到哪一个段位了？ 青铜 你已经用过promise解决过异步编程了，并知道通过调用.then()和.catch()来处理回调函数。 基本用法 const promise = new Promise(function(resolve, reject) { // ... some code if (/* 异步操作成功 */){ resolve(value); } else {
【JavaScript进阶之旅 异步篇 第十九章】异步的开端Promise
马云
07-06 238
JS是单线程的，如果遇到数据量大的问题，解决方案就是异步操作；而异步操作通常是通过回调函数的方式解决。 在jQuery中也是通过Callback处理异步操作，而jQuery中的Deferred方法返回的对象就是一个异步操作的容器对象，该对象可以调用reject方法，抛出异步失败，但是我们不希望直接在外部可以调用reject方法来抛出异步失败，所以引入了Promise，Deferred方法返回的一个Promise对象，解决了在外部直接调用reject方法的问题，Promise可以说是阉割版的Defer...
Promise项目实践与异常处理方式
热门推荐
David糖的博客
07-01 1万+
Promise是解决回调地狱的好工具，比起直接使用回调函数promise的语法结构更加清晰，代码的可读性大大增加。但是想要在真是的项目中恰当的运用promise可不是随便写个Demo这个简单的，如果运用不当反而会增加代码的复杂性。1. 使用Promise经常遇到的问题1.1 老旧浏览器没有Promise全局对象增么办?如果辛辛苦苦写完代码，测试后发现不兼容IE6、7增么办？难道要推翻用回调函数重写？
Promise深入理解（二）
QYDUAN的博客
09-10 600
Promise深入理解 颜色 在开始正文前，先提前定个基调。 Promise 哪些 API 涉及了微任务？ Promise 中只有涉及到状态变更后才需要被执行的回调才算是微任务，比如说 then、catch 、finally，其他所有的代码执行都是宏任务（同步执行）。 new Promise((resolve) => { // 此处为同步执行 resolve(1) }).then((data) => { // 此处为异步执行（丢到微任务队列中） console
关于JavaScript中异步的一些理解
HermitSun的博客
05-19 190
这是由一个问题引发的阅读和思考。肯定还会有后续的。 问题的开端是这样，有人来问我，我这个代码为什么一直undefined，我说你让我看看。他的代码大概长这样： var arr = [1, 2, 3]; for (var i = 0; i < arr.length; ++i) { $.ajax({ type: 'GET', async: true, ...
前端开源库-es6-promise-pool
08-29
前端开源库-es6-promise-poolES6 Promise池，在限制并发性的池中运行Promise。
es6-promise-polyfill:es6-promise 的自动 polyfill 版本，promise 随心所欲！
06-27
es6-promise-polyfill es6-promise 的自动 polyfill 版本，promise 随心所欲！用法将其嵌入到[removed]标签中，并与 ES6 Promise 相同使用。 。
es6-promise@4.1.1.zip
06-18
在 JavaScript 中，所有代码都是单线程的，也就是同步执行的。而 Promise 就为异步编程提供了一种解决方案。
jQuery 选择前、后、父元素进行操作
最新发布
qq_30049249的博客
06-25 506
https://andi.cn/page/621465.html
一个很好用的地图工具的使用：思极地图，以及vue+思极地图的使用
浩星
06-18 543
思极地图，给我们带来了很多便利，这里分享下他的信息与使用。
使用nvm管理nodejs版本，设置淘宝NPM镜像源
d312697510的博客
06-19 265
使用nvm管理nodejs版本，设置淘宝NPM镜像源，修改新的镜像源地址
若以框架学习（3），echarts结合后端数据展示，暂时完结。
m0_51798113的博客
06-22 263
前三天，参加毕业典礼，领毕业证，顿时感到空落落的失去感，没有工作，啥也没有，总感觉一辈子白活了。因为数据太多了，有1000条，其实可以限制下不查那么多。由于自己前端技术问题，迟迟不能完成，所以我又网上搜了下。调整了下代码，终于完成了前后端echars数据。前端当初没搞懂，后端就太简单了，返回一个map。修改后的代码如下，大家可以参考下。然后在main.js中配置。自己的界面先用一个案例。导入echartss。//导入echats。
es6-promise依赖下载
06-09
ES6-Promise是一个用于在JavaScript中实现Promise功能的库，它为浏览器和Node.js环境提供了对Promise规范的支持，特别适用于那些不直接支持ES6 Promise特性的环境。它解决了早期浏览器对Promise的不完全支持问题。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值