JavaScript因为是单线程的，为了不阻塞线程，只能通过异步调用的形式，今天学习了几种异步编程的方法，特此记录一下，因为之前有的地方也没搞明白，现在算是搞的七七八八了。
-
回调函数
这种方法是JS中最古老的异步编程手段，最常见的就是原生的AJAX请求，具体如下：
function success(result) {
console.log(result);
}
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if(request.readyState == 4) {
if(request.status == 200) {
success(request.response)
} else {
console.log(request.status);
}
} else {
}
};
request.open('GET', url, true);
request.send();
例子中的onreadystatechange就是一个回调函数，请求状态只要发生改变就会调用该函数。
-
Promise对象
传统的异步调用如果嵌套的层次多了会造成代码难以维护，就比如上边的例子，如果有请求相互依赖，就会使代码横向发展，很是繁琐，不过可以通过Promise来使其结果和过程的代码分离，实例如下：
function kiss(success, fail) {
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if(request.readyState == 4) {
if(request.status == 200) {
success(request.response)
} else {
fail(request.status);
}
} else {
}
};
request.open('GET', url, true);
request.send();
}
//创建一个Promise对象，需要传递一个函数，该函数包含两个参数，这两个参数也都是函数
var pro = new Promise(kiss);
//当在kiss内部调用了success,就会被then捕捉到，如果调用的是fail就会被catch捕捉到
//Promise中文意思是承诺，在该对象的理解上就是，内部的执行结果只有两种，
//一种是成功，一种是失败，过程是不可更改的
pro.then(function(result) {
console.log(result);
})
.catch(function(error) {
console.log(error);
});
从这里可以看出来，把结果集中到了Promise对象上，而其具体的执行过程在另一个函数里面。
-
Generator生成器
通过Promise对象实现的异步编程也不是很完美，因为如果过程多的情况下，会出现多个then，不能一目了然的知道每个then返回的具体是什么，那么可以使用生成器来实现异步编程，该方法是让异步编程看起来更加的像同步编程，直接看例子：
function ajax(url) {
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if(request.readyState == 4) {
if(request.status == 200) {
myList.next(request.responseText); //3.进入这个地方，把结果传出去了，传给的是上一个yield，然后又开始执行了
} else {
console.log(request.status);
}
} else {
}
};
request.open('GET', url, true);
request.send();
}
function* ajaxList() {
var result1 = yield ajax('http://api.jirengu.com/fm/getSong.php'); //2.启动后执行yield的函数，然后暂停
console.log('这是第一个结果', result1);
var result2 = yield ajax('http://weixin.jirengu.com/weather/now?cityid=WX4FBXXFKE4F');
console.log('这是第二个结果', result2);
var result3 = yield ajax('http://api.jirengu.com/getWeather.php');
console.log('这是第三个结果', result3);
}
myList = ajaxList();
myList.next(); //1.启动
Generator因为可以通过yield来记住执行状态，所以可以用来执行异步编程。
-
async/await
该方式跟生成器类似，不过更加的方便，算是生成器的语法糖，具体注意地方已经在实例中标出，直接上例子：
function ajax1(url) {
return new Promise(function(success, failer) {
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if(request.readyState == 4) {
if(request.status == 200) {
console.log('呵呵哒', request.responseText);
success(request.responseText);
} else {
console.log(request.status);
}
} else {
}
};
request.open('GET', url, true);
request.send();
});
}
async function asyncTest() {
var result1 = await ajax1('http://api.jirengu.com/fm/getSong.php');//await后面是一个promise对象，成功和失败都会直接返回结果。
console.log(result1, '什么玩意啊1');
var result2 = await ajax1('http://weixin.jirengu.com/weather/now?cityid=WX4FBXXFKE4F');
console.log(result1, '什么玩意啊2');
}
var asyncPro = asyncTest();
console.log('这个是promise对象吗?', asyncPro instanceof Promise);
具体在JS中常用的异步编程就以上几种，其他的以后学习到了具体再做记录。