master

分支 (3)

管理

管理

master

test

testing

ES6
/
09_Promise对象.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>11_Promise对象</title>
</head>
<body>
<!--
1. 理解:
  * Promise对象: 代表了未来某个将要发生的事件(通常是一个异步操作)
  * 有了promise对象, 可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数(俗称'回调地狱')
  * ES6的Promise是一个构造函数, 用来生成promise实例
2. 使用promise基本步骤(2步):
  * 创建promise对象
    let promise = new Promise((resolve, reject) => {
      //初始化promise状态为 pending
      //执行异步操作
      if(异步操作成功) {
        resolve(value);//修改promise的状态为fullfilled
      } else {
        reject(errMsg);//修改promise的状态为rejected
      }
    })
  * 调用promise的then()
    promise.then(function(
      result => console.log(result),
      errorMsg => alert(errorMsg)
    ))
3. promise对象的3个状态
  * pending: 初始化状态
  * fullfilled: 成功状态
  * rejected: 失败状态
4. 应用:
  * 使用promise实现超时处理

  * 使用promise封装处理ajax请求
    let request = new XMLHttpRequest();
    request.onreadystatechange = function () {
    }
    request.responseType = 'json';
    request.open("GET", url);
    request.send();
-->

<script type="text/javascript">
	// 模拟异步操作
    let promiseAsync = new Promise((resolve, reject) => {
        console.log('1111');//同步执行
        //启动异步任务,一段耗时的异步操作
        setTimeout(function () {
            console.log('3333');
            resolve('success');
        },1000)
    });
    promiseAsync.then((data) => {
        console.log('成功了。。。' + data);
    }, (error) => {
        console.log('失败了' + error);
    })
	.catch(error=>{
		console.log(error);
	})
    console.log('2222');//同步执行


	// 执行一个异步任务
	function random(){
		return new Promise((resolve,reject)=>{
			setTimeout(function(){
				const num=Math.random();
				if(num>=0.5){
					resolve(num);
				}else{
					reject('数字小于0.5')
				}
			},3000)
		})
	}
	random().then(res=>{
		console.log(res)
	}).catch(err=>{
		console.log(err)
	})


	// 依次执行多个异步任务
	let count=1
	function runAsync1(){
		const p=new Promise((reslove,reject)=>{
			setTimeout(()=>{
				reslove('执行完成'+count++)
			},4000)
		})
		return p
	}
	runAsync1().then(res=>{
		console.log(res);
		return runAsync1()
	}).then(res=>{
		console.log(res);
		return runAsync1()
	}).then(res=>{
		console.log(res)
	})


	// function loadImageAsync(url) {
	//    return new Promise(function(resolve, reject) {
	//     const image = new Image();
	//      image.onload = function() {
	//        resolve(image);
	//      };
	//      image.onerror = function() {
	//       reject(new Error('Could not load image at ' + url));
	//      };
	//     image.src = url;
	// 	console.log(image.src)
	//   });
	// }
	// loadImageAsync('http://houyuantest.oss-cn-zhangjiakou.aliyuncs.com/images/2019/11/25/15746731245012585.png')
	// .then(res=>{
	//  	console.log(res)
	//  })

</script>

</body>

</html>