你应该学习的 JS 异步编程与Promise，还有async与await实例详解

最新推荐文章于 2023-12-14 11:46:49 发布
最新推荐文章于 2023-12-14 11:46:49 发布
阅读量577 收藏
点赞数
分类专栏： promise 异步 任务队列 文章标签： 前端异步编程 promise 微任务宏任务
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34507902/article/details/107889303
版权
promise 同时被 3 个专栏收录
2 篇文章 0 订阅
订阅专栏
异步
2 篇文章 0 订阅
订阅专栏
任务队列
1 篇文章 0 订阅
订阅专栏

目录

1.首先看下例子：通过文件加载了解任务排序

2.promise.then方法也是一个promise对象

3.then返回值的处理技巧：then返回promise中的成功或者失败的结果， 在then之后的then返回then中return中的值 如果返回的是promise则返回promise成功或者失败的结果 eg:

 4.其他类型的promise封装：

 5.用promise封装ajax:    ​

 6.封装setTimeout定时器

7.构建扁平化的setInterval ：实现div向右移动到left=200px停止 开始缩小宽度到10px停止缩放背景变红色

从今天开始我就把自己学习异步编程 promise /async/await的学习做个总结：有新的关于这方面的知识我就会放到里面 博客会不断的更新 我这里总结的都是需要注意的  基础的东西可能不太全  没学过promise可以去看看基础教程promise之后在看这个！

1.首先看下例子：通过文件加载了解任务排序

eg:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>

</body>
</html>
<script type="text/javascript">
	function load(src,resolve){
		let script=document.createElement("script");
		script.src=src;
		script.onload=resolve;
		document.body.appendChild(script);
		let ele=document.querySelector('script');
		console.log(ele.src);
	}
	load('./1.js',()=>{
		load('./2.js',()=>{
			two()//
			// debugger
		})
	})
	
	console.log(21121)
        //1.js
  function one(){
	console.log('one');
	console.log('1.js文件中的one函数执行完成')
  }
   //2.js
  function two(){
	one();
	console.log('two');
  }
</script>

js是单线程的，文件首先加载主线程同步的任务，从上到下依次执行 ：

1.首先打印同步的console.log(ele.src);但是是空值，还没有加载文件完成 这需要一个过程 是个异步执行的宏任务 

2.执行console.log(21121)打印

3.加载onload中的函数：1.js文件加载完成加载2.js文件 加载完2.js之后调用2.js中的two函数 two中首先调用了one()函数，one是   1.js文件已经加载完成，所以执行one里面的console.log('one');console.log('1.js文件中的one函数执行完成')；之后执行   console.log('two');

截图看加载代码的结果如下：

2.promise.then方法也是一个promise对象

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

</body>
</html>
<script type="text/javascript">
	let p1=new Promise((resolve,reject)=>{
       resolve("成功")
	})
	let p2=p1.then((value)=>{
       console.log(value);
	},(reason)=>{
       console.log(reason);
	})
	console.log(p1);//Promise {<fulfilled>: "成功"}
	console.log(p2);//Promise {<pending>}
	setTimeout(()=>{
		console.log(p1);//Promise {<fulfilled>: "成功"}
		console.log(p2);Promise {<fulfilled>: undefined}
	})
	/*
    ** tip：promise.then方法也是一个promise对象
    一次打印如下结果：
    1.html:19 Promise {<fulfilled>: "成功"}
	1.html:20 Promise {<pending>}
	1.html:15 成功
	1.html:22 Promise {<fulfilled>: "成功"}
	1.html:23 Promise {<fulfilled>: undefined}
	*/
	/*
       代码先执行主线程的任务：
       1.19/20行打印出来  此时p1是已经执行完了 p2是p1的任务then返回结果promise对象 是个微任务 还没执行
       2.之后开始执行p2中的then方法打印"成功"  
       3.之后开始执行宏任务队列中的setTimeout 此时微任务都执行完毕所以此时 promise都是fulfilled状态
	*/
</script>

3.then返回值的处理技巧：then返回promise中的成功或者失败的结果， 在then之后的then返回then中return中的值 如果返回的是promise则返回promise成功或者失败的结果 eg:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

</body>
</html>
<script type="text/javascript"> 
	//then返回值的处理技巧
	/*let p1=new Promise((resolve,reject)=>{
		resolve("fulfilled");
	})
	let p2=p1.then((value)=>{
       console.log(value);
       // return 'then返回的结果's
	}).then((value)=>{
		//此时是对P对象的return返回的结果的接收
		console.log(value);
	},(reason)=>{
		console.log(reason);
	})*/
	let p1=new Promise((resolve,reject)=>{
		resolve("fulfilled");
	})
	.then((value)=>{
            console.log(value);//fulfilled
            return new Promise((resolve,reject)=>{
		            	setTimeout(()=>{
			              // resolve('成功')
				              reject('处理失败')
			            	},1000)
				       }).then(null,()=>{
				       	//null表示参数  在then使用处理错误前面的参数没有定义会报错  不需要这个就传递null
				       	  return new Promise((resolve,reject)=>{
				       	   reject('失败了。。。。')
				       	  })
				      })
			},(reason)=>{
		        console.log('error0:'+reason);
			})
	.then((value)=>{
		//此时是对P对象的return返回的结果的接收
		console.log(value);
	},(reason)=>{
		console.log("error1:"+reason);//返回的是promise中的 reject('失败了。。。。')
	})
</script>

 4.其他类型的promise封装：

tip:返回的只要是对象或者类的方法里面有then就会自动封装册成promise对象 在下一个then中接收这个方法并且处理这个结果

     eg:       

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    // 其他类型的promise封装
    let p1 = new Promise((resolve, reject) => {
        resolve("fulfilled");
    }).
        then(value => {
            /*  
            *返回的只要是对象或者类的方法里面有then就会自动封装册成promise对象
             在下一个then中接收这个方法并且处理这个结果
            */

            /*     return {
                    then(resolve, reject) {
                        setTimeout(() => {
                            resolve('这是对象')
    
                        },3000)
                    }
                } */
            /*    class Hd{
                   then(resolve, reject) {
                       setTimeout(() => {
                           resolve('这是对象')
   
                       },3000)
                   }
               }
               return new Hd; */
            return class {
                static then(resolve, reject) {
                    setTimeout(() => {
                        // resolve('这是对象')
                        reject('失败')
                    }, 3000)
                }
            }
        }, reason => {

        }).then(value => {
            console.log(value);
        }, reason => {
            console.log('error' + reason);
        })
</script>

 5.用promise封装ajax:
    

 6.封装setTimeout定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>    
function timeout(delay=1000){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve("参数")
        },delay)
    })
}
timeout(2000).then(value=>{
    console.log('返回数据第一次:'+value);
    return timeout(2000)
}).then(value=>console.log("返回数据第二次:"+value))
</script>

7.构建扁平化的setInterval ：实现div向右移动到left=200px停止 开始缩小宽度到10px停止缩放背景变红色

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: green;
            position: absolute;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>
<script>
    function Interval(delay = 1000, callback) {
        return new Promise((resolve, reject) => {
            let id = setInterval(() => {
                callback(id, resolve);
            }, delay)
        })
    }
    Interval(50, (id, resolve) => {
        console.log(122);
        let div = document.querySelector('div');
        let left = parseInt(window.getComputedStyle(div).left);
        div.style.left = left + 10 + 'px';
        if (left >= 200) {
            clearInterval(id);
            resolve(div)
        }
    }).then((div) => {
        Interval(50, (id, resolve) => {
            let width = parseInt(window.getComputedStyle(div).width);
            div.style.width = width - 10 + 'px';
            if (width <= 20) {
                clearInterval(id);
                div.style.background = 'red';
            }
        })
    })
</script>

 8.promise队列原理  上一个promise执行完成之后返回结果下一个promise才执行

let promise=Promise.resolve('成功');
	promise=promise.then((v)=>{
		return new Promise((resolve,reject)=>{
			setTimeout(()=>{
	               console.log(1)
	               resolve('ok')
			},1000)
		})
	})
	promise.then((res)=>{
		return new Promise((resolve,reject)=>{
			setTimeout(()=>{
				console.log(2);
				resolve('ok');
			})
		})
	})

9.async/await语法糖：async 返回promise对象  await 等待的new Promise结果这个执行之后才执行下面的代码

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	async function getNameInfo(){
		let name=await new Promise((resolve,reject)=>{
			setTimeout(()=>{
	            resolve('张三');
	        },1000)
		})
		console.log("我是："+name);
		let age=await new Promise((resolve,reject)=>{
			setTimeout(()=>{
			 resolve(name+":"+'21岁')
	        },1000)
		})
		console.log(age);
	}
	getNameInfo();/*
	我是：张三
    张三:21岁*/
</script>
</body>
</html>

10.async延时函数：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	async function sleep(){
		return new Promise((resolve,reject)=>{
			setTimeout(()=>{
	            resolve('张三');
	            	// console.log("计时器");
	        },1000)
		})
	}
	// sleep();
	async function getMyUserName(){
		for(let user of ["张三","李四"]){
			await sleep();
            console.log(user);//张三 李四
		}
            
	}
	getMyUserName();
</script>
</body>
</html>

11.await实现加载进度条：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.loading{
			height:30px;
			display: flex;
			width:0%;
			justify-content: center;
			align-items: center;
			background: green;
			color:#FFF;
		}
	</style>
</head>
<body>
	<div class="loading">0%asdasdsad</div>
<script type="text/javascript">
	let load=document.querySelector('.loading');
	function sleep(user){
		return new Promise((resolve,reject)=>{
			setTimeout(()=>{
				resolve(user)
                console.log(user)
			},1000)
		})
	}
	async function getMyUserName(users){;
		let len=users.length;
		for(let user=0;user<len;user++){
			await sleep(user);
			let progress=((user+1)/len)*100;
            load.style.width=progress+"%";
            console.log(load.style.width);
            load.innerHTML=Math.round(((user+1)/len)*100)+"%";
		}
            
	}
	getMyUserName(["张三","李四","liuye","送悟空"]);
</script>
</body>
</html>

 

怒放的生命1991
关注
专栏目录
async_debugger_demo:Scala IDE的异步调试器入门指南
05-01
＃如何使用异步调试器这是一个简单的小项目，创建了五个代表农场中动物的角色。 当动物收到要说的信息时，他们会记下要说的话，这可能是五种可能的陈述之一。 狗可能会说“ Moo”，绵羊可能会说“ Meow”。 关键是任何动物演员都可以收到一条信息，说出任何一种可能的话语。 我们可以使用异步调试器查看消息的来源。 当我们查看发送该消息的演员时，我们可以看到他们在发送自己的消息之前被说了什么。 有关更多异步调试器功能的更多信息， 。 ##入门将此项目克隆到本地计算机 下载 启动Eclipse 切换到“调试”透视图 转到窗口菜单 选择“打开透视图”菜单项，然后在其下方选择“调试” 将“异步堆栈”选项卡添加到您的Eclipse窗格中（如果尚不存在） 转到窗口菜单 选择“显示视图”菜单项，然后在其下方嵌套“其他”菜单项 选择“ Scala”，然后在其下方选择“ Async Stack” 打开C
promise 经典题目
Gjesus33的博客
08-02 428
代码】promise经典题目。
面试题：promise的值穿透
qq_50771957的博客
08-24 424
面试题：promise的值穿透
Promise原理详解及实现方式
19年的墨先生的博客
09-11 8479
在异步编程中，许多操作都会放在回调函数（callback）中，有时候需要拿到上一个异步操作的返回值再做第二次请求 比如： asyncOperation(data => { // 处理 `data` anotherAsync(data2 => { // 处理 `data2` yetAnotherAsync(() => { // 完成 }) }) }) 上面代码中，每增加一个异步请求，就会多添加一层回调函数的嵌套，过多的回调
vue在asyn方法中使用debugger无法获取到this处理方法
最新发布
u014642921的博客
12-14 244
浏览器中使用debugger无法查看到this, 显示未定义(undefined), 但是程序可以正常使用。调试可以查看到this的方式。
基于javascript的异步编程实例详解
10-20
本实例详解主要关注基于JavaScript的异步编程原理、实现方式以及相关注意事项。 首先，我们要理解什么是异步编程。在JavaScript中，由于其单线程的特性，同步代码会按照顺序逐行执行。然而，如果某个操作需要等待...
js--promise、async 和 await 相关知识总结.doc
07-13
## JavaScript Promise、async 和 await 知识详解 ### 1. Promise 基础 Promise 是 JavaScript 中用于处理异步操作的一种机制，它解决了传统的回调函数模式（回调地狱）导致的代码可读性和可维护性问题。Promise ...
详解小程序原生使用ES7 async/await语法
10-18
小程序原生使用ES7 async/await语法是现代JavaScript异步编程的简洁语法糖，它能够使异步代码的书写更加直观和易于理解。async/await是基于Promise的一种语法，可以让异步操作以同步的方式书写，提高代码的可读性...
ES6 javascript的异步操作实例详解
10-19
ES6（ECMAScript 2015）是对JavaScript编程语言的一次重大更新，引入了大量新特性，其中包括对异步编程的增强。在了解ES6异步操作之前，我们需要先理解异步编程的概念和原理。 异步编程是指在程序执行过程中，允许...
《JavaScript异步编程》PDF版本下载.txt
07-17
综上所述，《JavaScript异步编程》这本书详细介绍了JavaScript中异步编程的各种技术和最佳实践，包括但不限于回调函数、事件循环、Promise、async/await等核心概念和技术。通过学习本书，读者可以更好地理解和掌握...
手写 Promise.all 方法
m0_57642521的博客
11-14 745
<!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" /> <tit.
如何将Promise.then中的值直接return出来
m0_55686930的博客
10-19 4229
Promise 如何返回值，而不是返回 Promise 对象。实际开发中使用封装好的异步请求函数，为什么调用该函数返回的值一直都是 undefined。同步和异步的问题，「无法在当前获得未来的值」。
async\await的用法及比Promise的先进性
heroicpoem的专栏
04-23 196
背景 刚跨越了抽象的Promise，说可以解决回调地狱。我实践中回调地狱遇到的不多，Promise的理解和掌握真是费劲。 又有了更先进的async\await！！ 本文将解答了我的疑问： async干什么的？ await干什么的？ 与promise的关系？ async、await的阻塞性？ 是什么 async\await是解决js回调的更优形式，用更符合人脑直接理解的线性代码形式，实现了回调功能。 是基于Promise对象的，async返回promise对象，await等待promise对象。所以pr
[C#]异步编程: async和await（2）
绝圣弃智-零的博客
11-11 603
一、哪里来的线程？ async标记的方法的方法体会被编译到一个内部结构体的MoveNext方法中，有两个MoveNext调用者是来自于主线程之外的同一个工作线程。 这一个线程是何时发起的呢？ Task相关的操作有哪些？ 1 // 三、理解await 2 bool '&lt;&gt;t__doFinallyBodies'; 3 Exception '&lt;&gt;t__ex'; 4...
ES6快速理解Promise
笺赕
12-30 452
本篇文章来源于https://mp.weixin.qq.com/s/tetfPizYwMtr-XlBRfZAQA，主要帮助学习者快速理解认识Promise。 Promise是ES6中的特性，现在很多前端框架像AngularJS,Vue等在HTTP请求之后都是返回的Promise处理，因此Promise是必须要掌握的一个知识点。 案例1： Promise构造函数是同步执行的，promise.then中的函数是异步执行的。 const promise = new Promise((resolve,.
前端 Promise 简介
一个超爱喝可乐的web前端攻城狮
04-20 1907
前端 Promise 简介 Promise概述 Promise是ES6新增的引用类型，可以通过new来进行实例化对象。Promise内部包含着异步的操作。 new Promise(fn) Promise.resolve(fn) 这两种方式都会返回一个 Promise 对象。 Promise 有三种状态： 等待态（Pending）、执行态（Fulfilled）和拒绝态（Rejected），且Promise 必须为三种状态之一只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。 状
ES6中的Promise
qq_38722097的博客
03-20 420
title: ES6中的Promise 一. 提要 为解决传统异步所造成的回调地狱，社区提出了Promise方案并最终将其写入了语言标准。其用法如其名——承诺：即非立即兑现，通过then方法调用其状态，通过catch捕获错误。 二. 状态 Pending：进行中 Fulfilled：已成功 Rejected：已失败 Promise的另一个特性是无法改变。正如其英文寓意一样，一旦状态改变就...
Promise链式调用解惑
Stavin Li的博客
05-26 417
case 1： let promise = new Promise((resolve,reject)=>{ reject(new Error('Test')) }).catch(e=>{ console.log(e) }) console.log(promise) //Promise {<fulfilled>: undefined} //__proto__: Promise //[[PromiseState]]: "fulfilled" //[[PromiseResult]]:
【面试】中级前端面试题记录及答案总结
坚信万物皆可切的切图仔
04-16 4436
中级前端面试题
微信小程序async/await异步编程实例详解
微信小程序中使用 async/...通过使用 async/await，开发者能够编写更加清晰、易于理解的代码，降低异步编程的复杂度。尽管默认情况下微信小程序工具不支持，但通过正确的设置和使用，可以显著提升开发体验和代码质量。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值