一览 promise、async/await
下面用一个http请求来简要概述 Promise, async/await。
- 在没有 Promise 之前 发送一个 http请求是这样:
function httpRequest() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://cnodejs.org/api/v1/topics", true);
xhr.onreadystatechange = function(e) {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// 请求成功,获取数据,然后执行下一步
console.log('success');
} else {
// 请求失败,错误处理,然后执行下一步
console.log('fail');
}
}
}
xhr.send(null);
}
httpRequest();
- 当 Promise 出现后:
function createXMLHttpRequest() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://cnodejs.org/api/v1/topics", true);
xhr.send(null);
return new Promise(function (resolve, reject) {
xhr.onreadystatechange = function(e) {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
resolve('success');
} else {
reject('fail');
}
}
}
});
}
function handlResponse() {
createXMLHttpRequest().then(function (data) {
console.log(data);
}).catch(function (e) {
console.log(e);
});
console.log("run after handler");
}
handlResponse();
- 当 async/await出现:
function createXMLHttpRequest() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://cnodejs.org/api/v1/topics", true);
xhr.send(null);
return new Promise(function (resolve, reject) {
xhr.onreadystatechange = function(e) {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
resolve('success');
} else {
reject('fail');
}
}
}
});
}
async function handlerResponseAsync () {
await createXMLHttpRequest().then(function (data) {
console.log(data);
}).catch(function (e) {
console.log(e);
});
console.log("run after handler");
}
handlerResponseAsync();