ES6_Promise基础
回调地狱
相信小伙伴们在日常开发中会经常碰到类似开发场景：
setTimeout(function(){ console.log('陕西西安'); setTimeout(function () { console.log('广东深圳'); setTimeout(function () { console.log('浙江杭州'); },1000) },2000) },3000)
上述场景我们称之为回调地狱。
回调地狱：在回调函数中再嵌套回调函数的情况(是实现代码顺序执行的一种操作方式)
(1)代码的可读性差、可维护性差
(2)代码的扩展性差
Promise简介
Promise 是异步编程的一种解决方案：
从语法上讲，promise是一个对象，从它可以获取异步操作的消息；
从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。
promise有三种状态：pending(等待态)，fulfiled(成功态)，rejected(失败态)；
状态一旦改变，就不会再变。
创造promise实例后，它会立即执行。
Promise用处
promise是用来解决以下问题：1.回调地狱，代码难以维护， 常常第一个的函数的输出是第二个函数的输入这种现象
2.promise可以支持多个并发的请求，获取并发请求中的数据
Promise API
创建实例
<script> //实例化 Promise 对象 const p = new Promise(function(resolve, reject){ setTimeout(function(){ // let data = '数据库中的用户数据'; // resolve(data); let err = '数据读取失败'; reject(err); }, 1000); }); //调用 promise 对象的 then 方法 p.then(function(value){ console.log(value); }, function(reason){ console.error(reason); }) </script>
Promise的构造函数接收一个参数：函数，并且这个函数需要传入两个参数：
resolve ：异步操作执行成功后的回调函数
reject：异步操作执行失败后的回调函数
then方法
调用 then 方法，then方法的返回结果是 Promise 对象, 对象状态由回调函数的执行结果决定。
1. 如果回调函数中返回的结果是非promise类型的属性, 状态为成功, 返回值为对象的成功的值。
2.如果回调函数中返回的结果是promise对象, 状态为该promise对象中的状态。
3.如果抛出错误，状态为失败，返回值是对象的失败的值。
<script> const p = new Promise((resolve, reject) => { setTimeout(() => { resolve('用户数据'); // reject('出错啦'); }, 1000) }); const result = p.then(value => { console.log(value); //1. 非 promise 类型的属性 // return 'iloveyou'; //2. 是 promise 对象 // return new Promise((resolve, reject) => { // resolve('ok'); // // reject('error'); // }); //3. 抛出错误 // throw new Error('出错啦!'); throw '出错啦!'; }, reason => { console.warn(reason); }).then(value => { console.log(value); }, reason => { console.warn(reason); }); </script>
catch方法
我们知道Promise对象除了then方法，还有一个catch方法，它是做什么用的呢？其实它和then的第二个参数一样，用来指定reject的回调。用法是这样：
<script> const p = new Promise((resolve, reject)=>{ setTimeout(()=>{ //设置 p 对象的状态为失败, 并设置失败的值 reject("出错啦!"); }, 1000) }); // p.then(function(value){}, function(reason){ // console.error(reason); // }); p.catch(function(reason){ console.warn(reason); }); </script>
效果和写在then的第二个参数里面一样。不过它还有另外一个作用：在执行resolve的回调（也就是上面then中的第一个参数）时，如果抛出异常了（代码出错了），那么并不会报错卡死js，而是会进到这个catch方法中。与try/catch语句有相同的功能。
Promise.all方法
Promise的all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。
let Promise1 = new Promise(function(resolve, reject){})
let Promise2 = new Promise(function(resolve, reject){})
let Promise3 = new Promise(function(resolve, reject){})
let p = Promise.all([Promise1, Promise2, Promise3])
p.then(funciton(){
// 三个都成功则成功
}, function(){
// 只要有失败，则失败
})
有了all，就可以并行执行多个异步操作，并且在一个回调中处理所有的返回数据。
Promise.race方法
//请求某个图片资源
function requestImg(){
var p = new Promise((resolve, reject) => {
var img = new Image();
img.onload = function(){
resolve(img);
}
img.src = '图片的路径';
});
return p;
}
//延时函数，用于给请求计时
function timeout(){
var p = new Promise((resolve, reject) => {
setTimeout(() => {
reject('图片请求超时');
}, 5000);
});
return p;
}
Promise.race([requestImg(), timeout()]).then((data) =>{
console.log(data);
}).catch((err) => {
console.log(err);
});
requestImg函数会异步请求一张图片，我把地址写为"图片的路径"，所以肯定是无法成功请求到的。timeout函数是一个延时5秒的异步操作。我们把这两个返回Promise对象的函数放进race，于是他俩就会赛跑，如果5秒之内图片请求成功了，那么进入then方法，执行正常的流程。如果5秒钟图片还未成功返回，那么timeout就跑赢了，则进入catch，报出“图片请求超时”的信息。
