012 Promise对象
1、基本概念
Promise是异步编程的一种解决方案，比传统的解决方案一一回调函数和事件一一更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言便准，统一了用法，原生提供Promise对象
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。Promise提供统一的API，各种异步操作都可以用同样的方法进行处理
有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数，此外Promise对象提供统一的接口，使得控制异步操作更加容易
2、基本用法
ES6规定，Promise对象是一个构造函数，用来生成Promise实例
const promise=new Promise(function(resolve,reject){
//...some code
if(/*异步操作成功*/){
resolve(value);//成功的值
}else{
reject(error);//失败的值
}
});
Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由JavaScript引擎提供，不用自己部署
Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。
peomise.then(function(value){
//success
},function(error){
//failure
});
3、加载图片资源例子
<!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>
<div id="box">等待加载</div>
<script>
var box =document.getElementById("box")
function loadImageAsync(url){
const promise = new Promise(function(resolve,reject){
//异步处理：消耗时间的代码
const image =new Image();//创建image对象
image.src=url
image.onload=function(){
resolve(image)
}
image.onerror=function(){
reject(new Error('Could not load image at'+url))
}
})
return promise;
}
const promise= loadImageAsync("hppt://wangtetupian");
promise.then(function(data){
//成功
box.appendChild(data)
},function(error){
//失败
box.innerHTML="图片加载失败";
})
浙公网安备 33010602011771号