在JS的范畴里解决异步加载的方式很多,可以用回调函数,也可以用之前提到的Web Workers来解决.今天来整理另外一种异步处理的方式,Promise.
1.Promise简介
Promise较比回调等异步方式更强大,Promise相当于提供了一个异步事件的容器,事件的结果会一直保留在这个容器里,Promise的用法也跟一般的对象用法类似,利用系统提供的API,来完成各种异步操作.
Promise有几个特点:
1.整个过程是不会被打断的,只要过程开始,就不会被打断,Promise有三个状态,pending(进行中),fulfilled(已完成),rejected(被拒绝),而且状态只会从pending->fulfilled,或者pending->rejected这两种情况,只要状态凝固了确定了,就不会再发生变化,称为resolved(已经定型).
2.状态只要是发生了,就无法去改变这个状态,也就是Promise承诺的含义
2.Promise基本使用
用法实际跟一个常规的对象用法类似,也是需要根据类创建对象,然后使用系统提供的API,完成对应功能的实现
var promise = new Promise(function(resolve, reject){
// 异步执行的操作代码
console.log("博观而约取")
var a = 10;
// 如果异步执行成功
if (a < 100) {
resolve("厚积而薄发");
} else {
reject("吾告子止于此矣");
}
})
// 通过创建的promise对象获取异步操作的值
promise.then(function(val){
console.log(val);
}, function(error){
console.log(error)
})
console.log("测试")
上述代码会创建之后就运行,先打印"博观而约取",然后会把对应的异步事件放到Promise中,接下来执行执行最下面的打印,最后处理异步的事件,根据对应的then()的状态调用对应的回调函数,所以最后打印"厚积而薄发",这个过程跟event loop差不多,接下来看一个MDN上提供的异步请求数据的例子
function getJson(url){
return new Promise((resolve, reject) => {
var client = new XMLHttpRequest();
client.open("GET", url);
client.responseType = "json";
client.send();
client.onreadystatechange = function(){
if (client.readyState !== 4){
return
}
if (client.status == 200){
resolve(client.response);
} else {
reject(new Error(client.statusText))
}
}
})
}
// 方法调用
getJson('getJson.json').then((res) => {
console.log(res);
})
通过一个函数,然后把Promise对象返回,然后使用then()方法,直接处理对应的结果就可以了.
当第一个异步事件处理完之后,resolve如果在指定另一个promise对象,那第二个会等第一个执行完在处理第二个,相当于第二个也在event loop里,在loop里等待事件的处理
3.Promise的属性和方法
Promise属性有两个,一个是length,这个属性值始终为1,它代表构造函数参数的数量,另外一个是prototype,构造函数的原型,
原型上提供了一个属性, constructor的作用是返回创建promise对象的函数.两个方法是非常常用的:
一是then(),上面的例子也使用过,它的作用是把fulfilled和rejected两种状态对应的回调函数传到promise对象中,第一个参数是fulfilled状态的,第二个参数是可选的,对应rejected状态的回调函数.这个方法会返回promise对象,所以可以使用哪种链式写法.参考如下
getJson('getJson.json').then((res) => {
console.log(res);
}).then(() => {
console.log("aaa");
},() => {
console.log("bbb");
})
当第一个过程结束之后,执行完then的回调函数,会自动返回一个新的promise,这个新的实例跟之前网络请求所创建的不是同一个,我第一次看的时候以为还会调用继续请求数据,实际已经跟第一个promise没有关系了,开始进入一个新的周期,根据新的周期的状态去选择是resolve还是reject,在RN的网络请求中,基本上都是这种重叠的链式写法
二是catch(),这个方法相当于then(null, reject),相当于在调用then的时候,如果发生了异常,会直接调用catch()方法,去捕获这个异常.如果在resolve状态里发生了异常,也会被catch捕捉到
var promise = new Promise(function(resolve, reject) {
// resolve("挺好");
throw new Error("测试");
})
promise.then((res) => {
console.log(res);
}).catch((err) => {
console.log(err);
})
但是如果把注释打开,先执行resolve,也就是先改变了promise对象的状态的话,即使写了throw也不会触发,因为那会状态已经从pending变成fulfilled,跟catch无关了,而且状态不会再发生变化了,用法跟try/catch很接近.
在RN中,关于then的写法上,都只写一个resolve的回调函数,然后在结尾处写一个catch,这样写在写法上也跟try/catch一致.而且在链式写法上,如果其中有一个环节发生了异常,这个异常会一直传递,直到有一个catch把这个异常捕获到,所以在RN里会在最后一步写一个catch来收尾,找了一个RN的网络请求
fetch(url).then((response) =>response.json())
.then((responseData)=>{
// 数据处理
}) .catch((error)=>{
// 异常处理
})
简单的汇总和整理了一下Promise的用法,实际上用的地方很多,axios,RN都采用这种ES6的新规范,最后一句:人似秋鸿来有信,事如春梦了无痕