JS 异步编程与Promise以及async与await的实例详解

最新推荐文章于 2023-04-26 16:12:39 发布

宇雨️鱼

最新推荐文章于 2023-04-26 16:12:39 发布

阅读量128

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_45868552/article/details/120658847

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、开始

1、异步加载图片体验JS任务操作

function loadImag(src,resolve,reject) {
            let image = new Image()
            image.src = src
            image.onload = () => {
                resolve(image)
            }
            image.onerror = reject
        }

        loadImag(
            "./1.png",
            () => {
                console.log("图片加载成功");
            },
            () => {
                console.log("加载失败");
            }
        )

        console.log("后盾人");

2、定时器的任务轮询

<!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>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        div {
            position: absolute;
            width: 100px;
            height: 100px;
            left: 0px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div></div>

    
</body>
    <script>

        function interval(callback,delay = 50) {
            let id = setInterval(() => callback(id),delay)
        }

        
        
        interval(timeId => {
            const div = document.querySelector("div");
            let left = parseInt(window.getComputedStyle(div).left)
            div.style.left = left + 10 + 'px'
            if(left >= 200) {
                clearInterval(timeId)
                interval(timeId => {
                    let width = parseInt(window.getComputedStyle(div).width)
                    div.style.width = width - 10 + 'px'
                },1000)
            }
        }) 

        console.log('hhh');
    </script>
</html>

由上述两个我们知道，我们可以使用回调来使用实现异步，但是当回调过多的时候就会产生回调地狱，会导致代码的可读性变低，所以ES6提出了Promise

二、promise

1、promise对Ajax的封装请求

function ajax(url) {
	return new Promise((resolve,reject)) => {
		let xhr = new XMLHttpRequest()
		xhr.open("GET",url)
		xhr.send();
		xhr.onload = function() {
			if(this.status ===200) {
				resolve(JSON.parse(this.response))
		}else {
				reject("加载失败")
		}
}

xhr.onerror = function() {
	reject(this);
}

2、使用promise来构建扁平化的setInterval

function interval(delay = 1000,callback){
	return new Promise(resolve => {
		let id = setInterval(() => {
			callback(id,resolve)
		},delay)
	})
}

interval(100,(id,resolve) => {
	console.log(12)
	clearInterval(id)
})

宇雨️鱼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS 异步编程与Promise以及async与await的实例详解

一、开始1、异步加载图片体验JS任务操作function loadImag(src,resolve,reject) { let image = new Image() image.src = src image.onload = () => { resolve(image) } image.onerror = reject }
复制链接

扫一扫