js中的promise是一个异步编程的解决方案,语法层面上他是一个构造函数,名字为Promise()。
他的作用就是将一个任务task封装为一个Promise类的实例对象,这个对象会将任务自动运行并得到任务结果,而且在得到结果的过程中并不会影响到其他任务的进行。由此实现多个任务的并发进行。
实现异步的过程被隐藏在Promise类的实现过程中,我们只需要将任务交给Promise,Promise给我们一个instance,之后通过instance去拿任务结果就可以了。我们可以创建多个Promise类的实例instance。
下面将介绍Promise用法的一般代码写法。
目录
1,Promise构造函数参数介绍
Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。resolve和reject是两个函数,由JavaScript引擎提供,不用自己部署。
//resolve, reject名称不能修改
const promise = new Promise(function(resolve, reject) {
// ...some code
if ( /*异步操作成功,执行resolve方法,目的一般是将某些结果返回出去*/ ) {
resolve(value);
} else {
/*异步操作失败,执行reject方法,目的一般也是将某些结果返回出去*/
reject(error);
}
});
2,Promise实例对象的then()方法
Promise 实例生成以后,可以用then方法分别指定resolved状态和rejected 状态的回调函数。也就是对返回的任务结果进行处理。
promise.then(resolved = function(value) {
// success,对返回的结果value进行处理
},
rejected = function(error) {
//failure,直接把错误类型报给用户
});
3,异步加载图片的例子
<!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.baidu.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>
4,Ajax实操
<!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>