官方的定义是:Promise是ES6新推出的用于进行异步编程的解决方案,旧方案是单纯使用回调函数来解决的。对于开发人员来说,我们把promise当作一个普通的对象即可,使用它可以用来封装一个异步操作并可以获取其成功/失败的结果值。promise最大的好处在于能够解决回调地狱的问题。
注意:promise有且只有这2种状态改变,并且一个promise对象只能改变一次,无论变为成功还是失败,都会有一个结果值。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本使用</title>
<link crossorigin='anonymous' href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h2 class="page-header">Promise 初体验</h2>
<button class="btn btn-primary" id="btn">点击抽奖</button>
</div>
<script>
//生成随机数
function rand(m,n){
return Math.ceil(Math.random() * (n-m+1)) + m-1;
}
//获取元素对象
const btn = document.querySelector('#btn');
//绑定单击事件
btn.addEventListener('click', function(){
//1.创建promise对象(初始状态为pending状态),指定执行器函数
const p = new Promise((resolve,rejected)=>{
//2.在执行器函数种启动异步任务
setTimeout(()=>{
let n = rand(1,100)
if(n<=30){
resolve('恭喜')//3.如果成功,调用resolve(),指定成功的value,promise变为resolved状态
}else{
rejected('再接再厉')//4.失败,调用rejected(),指定失败的reason,promise变为rejected状态
}
})
})
console.log("=======")//在setTimeout之后执行,因为setTimeout是在promise内部同步调用的
//5.promise指定成功或失败的回调函数来获取成功的value或失败的reason
p.then((data)=>{//成功的回调函数onResolved,得到成功的data
console.log(data)
alert(data)
},(reason)=>{//失败的回调函数onRejected,得到失败的reason
alert(reason)
console.log(reason)
})
});
</script>
</body>
</html>
const fs = require('fs')
const p = new Promise((resolve, rejected) => {
fs.readFile("./desktop/content.txt", function (err, data) {
if (!err) {
resolve(data)
} else {
rejected(err)
}
});
})
p.then((data) => {
console.log(data.toString())
// alert(data)
}, (reason) => {
// alert(reason)
console.log(reason)
})
<script>
/**
* 封装一个函数 sendAJAX 发送 GET AJAX 请求
* 参数 URL
* 返回结果 Promise 对象
*/
function sendAJAX(url){
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.open("GET", url);
xhr.send();
//处理结果
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
//判断成功
if(xhr.status >= 200 && xhr.status < 300){
//成功的结果
resolve(xhr.response);
}else{
reject(xhr.status);
}
}
}
});
}
sendAJAX('https://xxxx')
.then(value => {
console.log(value);
}, reason => {
console.warn(reason);
});
</script>
传入一个以(err,valve)=>{}回调函数作为最后一个参数的函数,并返回一个返回promise的版本。这句话有点拗口,我们使用案例来说明一下:
const fs = require('fs')
const util = require('util')
let fsPromise = util.promisify(fs.readFile)//readFile函数最后一个参数是回调函数
fsPromise('./desktop/content.txt').then((data) => {
console.log(data.toString())
}, (reason) => {
console.log(reason)
})
//没有经过promise风格转化的写法
// const p = new Promise((resolve, rejected) => {
// fs.readFile("./desktop/content.txt", function (err, data) {
// if (!err) {
// resolve(data)
// } else {
// rejected(err)
// }
// });
// })
// p.then((data) => {
// console.log(data.toString())
// // alert(data)
// }, (reason) => {
// // alert(reason)
// console.log(reason)
// })
Promise构造函数:Promise(excutor)
Promise.prototype.then 方法: (onResolved, onRejected) => {}
Promise.prototype.catch 方法: (onRejected) => {}
Promise.resolve 方法: (value) => {}
Promise.reject 方法: (reason) => {}
Promise.all 方法: (promises) => {}
Promise.race 方法: (promises) => {}
案例如下
<script>
//
let p1 = Promise.resolve(521);
//如果传入的参数为 非Promise类型的对象, 则返回的结果为成功promise对象
//如果传入的参数为 Promise 对象, 则参数的结果决定了 resolve 的结果
let p2 = Promise.resolve(new Promise((resolve, reject) => {
// resolve('OK');
reject('Error');
}));
// console.log(p2);
p2.catch(reason => {
console.log(reason);
})
</script>
<script>
// let p = Promise.reject(521);
// let p2 = Promise.reject('iloveyou');
let p3 = Promise.reject(new Promise((resolve, reject) => {
resolve('OK');
}));
console.log(p3);
</script>
<script>
let p1 = new Promise((resolve, reject) => {
resolve('OK');
})
// let p2 = Promise.resolve('Success');
let p2 = Promise.reject('Error');
let p3 = Promise.resolve('Oh Yeah');
//
const result = Promise.all([p1, p2, p3]);
console.log(result);
</script>
<script>
let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('OK');
}, 1000);
})
let p2 = Promise.resolve('Success');
let p3 = Promise.resolve('Oh Yeah');
//调用
const result = Promise.race([p1, p2, p3]);
console.log(result);
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Promise关键问题 - 中断 Promise 链条</title>
</head>
<body>
<script>
let p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('OK');
}, 1000);
});
p.then(value => {
console.log(111);
//有且只有一个方式
return new Promise(() => {});
}).then(value => {
console.log(222);
}).then(value => {
console.log(333);
}).catch(reason => {
console.warn(reason);
});
</script>
</body>
</html>
async 函数
await 表达式
注意
/**
* resource 1.html 2.html 3.html 文件内容
*/
const fs = require('fs');
const util = require('util');
const mineReadFile = util.promisify(fs.readFile);
//回调函数的方式
// fs.readFile('./resource/1.html', (err, data1) => {
// if(err) throw err;
// fs.readFile('./resource/2.html', (err, data2) => {
// if(err) throw err;
// fs.readFile('./resource/3.html', (err, data3) => {
// if(err) throw err;
// console.log(data1 + data2 + data3);
// });
// });
// });
//async 与 await
async function main(){
try{
//读取第一个文件的内容
let data1 = await mineReadFile('./resource/1x.html');
let data2 = await mineReadFile('./resource/2.html');
let data3 = await mineReadFile('./resource/3.html');
console.log(data1 + data2 + data3);
}catch(e){
console.log(e.code);
}
}
main();