Promise
promise用来解决异步操作同步编程的问题
constructor
let promise = new Promise((resolve, reject) => {
// body
})
// resolve 为执行成功时的回调,reject 为执行失败时的回调
methods
Promise.prototype.then(resolve, reject) Promis 第二个参数可选 Promise.prototype.catch(reject) 相当于then(null, reject) Promise.all() 将多个异步操作封装成一个新的promise,以保证全部执行成功才执行相应的resolve Promise.race() 将多个异步操作封装成一个新的promise, 只要任一实例率先返回状态,就执行相应的回调 Promise.resolve() 将现有对象转化为Promise对象,且状态为resolve() Promise.reject() 将现有对象转化为Promise对象,且状态为reject() Promise.done() 置于回调链的尾端,以保证所有产生的错误都可以被捕捉到 Promise.finally() 无论返回的状态如何都会执行的代码块
demo
let promise = new Promise((resolve, reject) => {
let number = Math.round(Math.random());
if (number) {
setTimeout(resolve, 3000 , number);
} else {
setTimeout(reject, 3000 , number);
}
})
promise
.then (number => {
console .log('resolve:' , number);
})
.catch (number => {
console .log('reject:' , number);
})
利用Promise封装ajax
// 实现一个简单的get
// http.js
Class Http {
get(url) {
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
xhr.open('GET' , url);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readState === 4 ) {
if (xhr.status >= 200 && xhr.status < 300 ) {
resolve(xhr.responseText);
} else {
reject({
code: xhr.status,
url: xhr.responseURL,
text: xhr.statusText
});
}
}
}
})
}
}
export default new Http ()
// test .js
import $http from './http .js ';
$http .get (url)
.then (message => {
// 可多次使用then 对message进行处理,并将message返回(返回的是一个新的promise实例)
message._ok = true ;
return message;
})
.then (message => {
console .log(message)
})
.catch (error => {
console .error(error);
})
.finally (() => {
console .log('执行完毕' );
})
.done () ;
// 在web 与服务器进行交互的时候,可能我们需要同时请求好几个接口,并等到所有数据返回之后才可以进行模板渲染,此时就可以用到Promise .all ()
// http .js 添加一个getAll 方法
...
getAll (...urlArray) {
let _this = this ;
let promiseArray = urlArray .map (item => _this.xhr(item)) ;
return Promise .all (promiseArray) ;
}
...
// test .js
$http .getAll ([url1, url2])
.then (message => {
// message是一个数组,数组为urlArray中接口的返回值,且下标一一对应
// 此处可将之转化为对应的json以便下文处理,之后可以提取
return message;
})
.then (message => {
console .log(message)
})
.catch (error => {
console .error(error);
})
.finally (() => {
console .log('执行完毕' );
})
.done () ;