js的promise用法

谦虚且进步

2024-04-28 帮助1人

js中的promise是一个异步编程的解决方案，语法层面上他是一个构造函数，名字为Promise()。

他的作用就是将一个任务task封装为一个Promise类的实例对象，这个对象会将任务自动运行并得到任务结果，而且在得到结果的过程中并不会影响到其他任务的进行。由此实现多个任务的并发进行。

实现异步的过程被隐藏在Promise类的实现过程中，我们只需要将任务交给Promise，Promise给我们一个instance，之后通过instance去拿任务结果就可以了。我们可以创建多个Promise类的实例instance。

下面将介绍Promise用法的一般代码写法。

1，Promise构造函数参数介绍

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。resolve和reject是两个函数，由JavaScript引擎提供，不用自己部署。

Promise 实例生成以后，可以用then方法分别指定resolved状态和rejected 状态的回调函数。也就是对返回的任务结果进行处理。

<!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>异步加载图片</title>
</head>
<body>
<div id="box"></div>
<script>
box = document.getElementById('box');
function loadImageAsync(url) {
/*创建一个image资源对象，因为要网络请求，比较消耗时间***********************/
function task(resolve, reject) {
const image = new Image();
image.src = url;
//onload等于true
image.onload = function() {
resolve(image);
};
//onerror等于false
image.onerror = function() {
reject(new Error(' could not load image at ' url));
};
}
return new Promise(task);
}
promise = loadImageAsync('https://pan.百度.com/box-static/disk-theme/theme/white/img/logo@2x.png');
promise.then(
function(data) {
box.appendChild(data);
},
function(error) {
box.innerHTML = '图片加载失败';
console.log(error);
}
)
</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>ajax实操</title>
</head>
<body>
<div id="box"></div>
<script>
box = document.getElementById('box');
function GETJSON(url) {
/*************************************************************/
function ajaxTask(resolve, reject) {
const handler = function() {
if (this.readystate !== 4) {
return;
}
if (this.status === 200) {
resolve(this.response);
} else {
reject(new Error(this.statusText));
}
};
const client = new XMLHttpRequest();
client.open("GET", url);
client.onreadystatechange = handler;
client.responseType = "json";
client.setRequestHeader("Access-Control-Allow-Origin", "*");
client.send();
}
/*************************************************************/
return new Promise(ajaxTask);
};
/*************************************************************/
promise = GETJSON("https://www.hupu.com/home/v1/news?pageNo=4&pageSize=50");//出现ajax无法跨域的问题，目前还不会解决
promise.then(
function(data) {
console.log(data);;
},
function(error) {
box.innerHTML = '加载失败';
console.log(error);
}
)
</script>
</body>
</html>

这篇好文章是转载于：编程之路