JS异步处理
众所周知，JS是一门单线程的语言，即每次只能处理一个任务。这样导致的结果就是在处理一些耗时比较长的任务时，存在等待任务执行的问题，特别是在浏览器页面的展示上，会有假死的现象发生。
为了应对这些问题，JS将任务的执行模式分为两种：同步执行（Synchronous）和异步执行（Asynchronous）。
ES6之前
在ES6之前，处理异步只能通过回调函数的方式来传达执行已经结束的标识。最常见的例子就是ajax请求。
let getData = function(callback) {
$.ajax({
url: '',
data: {},
success: function(res) {
callback(res);
}
})
}
而这种回调函数使编写出来的代码不易按照逻辑条理来阅读和维护。
ES6之后
Promise的出现无疑大大解决了代码中大量的回调函数不易维护的问题。
function promiseGetData() {
return new Promise(function (resolve) {
$.ajax({
url: '',
data: {},
success: function (data) {
resolve(data);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
resolve(XMLHttpRequest);
}
});
});
}
promiseGetData().then(function(data) {
console.log(data);
})
Promise对象
Promise是一个构造函数
在浏览器中打印Promise，可以看出它是一个构造函数，并带有all，race，resolve，reject等方法。同时，在原型链上带有catch，then等方法。
1539512140981.jpg
Promise的状态
Promise提供了三种状态：pending、fulfilled、rejected。除了pending之外，其他状态都不可逆并且不可更改。
Promise构造函数有两个参数，分别是resolve函数和reject函数。当状态更改为fulfilled时，会将返回的数据传到resolve函数中执行；当状态更改为rejected时，会将返回的错误信息传到reject函数中执行。当状态改变后，会执行then方法，返回成功或失败的状态。
new Promise(function(data) {
console.log("success");
}, function(err) {
console.log("error");
}).then(function(res) {
console.log("状态改变之后执行");
})
then--链式操作的方法
then是Promise中的精髓方法。它返回的是一个Promise对象，作用是为Promise实例添加状态改变时的回调函数。而它返回的Promise对象，并不是先前的那个对象，而是全新的一个Promise。
let promises = new Promise(function(data) {
console.log("success");
}, function(err) {
console.log("error");
}).then(function(res) {
console.log("状态改变为fulfilled时执行");
}).catch(function(error) {
console.log("状态改变为rejected时执行");
})
Promise.all([p1, p2, p3])
这是Promise提供的功能方法，在所有Promise都更改状态之后才会执行并以数组的形式返回所有Promise的结果。
Promise.all = function(promises) {
return new Promise((resolve, reject) => {
let arr = [];
let i = 0;
function processData(index, data) {
arr[index] = data;
if (++ i == promises.length) {
resolve(arr);
}
}
for (var i = 0; i < promises.length; i++) {
promise[i].then(data => {
processData(i, data);
}).catch(function(error) {
reject(error);
})
}
})
}
Promise.race([p1, p2, p3])
race方法是将多个Promise对象整合，只要其中一个Promise更改状态，就会返回该Promise返回的数据。
Promise.race = function(promises) {
return new Promise((resolve, reject) => {
for(let i = 0; i < promises.length; i++) {
promise[i].then(resolve, reject);
}
})
}
网友评论