关于异步
- JavaScript语言将任务的执行模式可以分成两种：同步（Synchronous）和异步（Asychronous）。
- “异步模式”一共有4种方法，这4种方法可以写出结构更合理，性能更出色，维护更方便的js代码。这四种模式分别为：
- 回调函数（callback）；
function f1(callback){
settimeout(function(){
//f1代码
callback();
},1000);
}
f1(f2);//一秒后才会执行f2函数
- 事件监听（Listener）；
elment.addEvenListener("click",handler1,false);
elment.addEvenListener("click",handler2,false);
elment.addEvenListener("click",handler3,false);
- 观察者模式；
观察者模式也叫发布订阅模式，它定义了一种一对多的关系，让多个观察者同时对监听某一个主题对象，这一个主题对象的状态变化就会通知多有的观察者对象，使得他们能够自动更新自己。
详情转至：观察者模式与订阅发布模式
优点：
1、支持简单的广播通信，自动通知所有已经订阅过的对象。
2、页面载入后，目标对象很容易与观察者存在一种动态关联，增加灵活性。
3、目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。
- promise对象；
promise解决的问题
- promise可以帮忙管理异步方式返回的代码。他讲代码进行封装并添加一个类似于事件处理的管理层。我们可以使用promise来注册代码，这些代码会在在promise成功或者失败后运行。
- 简单的说，它的思想是：每一个异步任务返回一个promise对象，该对象有一个then方法，允许指定回调函数。
ajax回调地狱
function $ajax(param,callback){
$.ajax({
url: param.url,
type: param.type||'get',
data: param.data || '',
async:param.async || true,
success: function(data){
callback(data);
},
error: function(error){
console.log(error)
}
})
function step1(param){
$ajax(param,function step2(data){
console.log(data);
$ajax(param2,function step3(data){
console.log(data);
$ajax(param3,function step3(data){
console.log(data);
})
})
})
}
step1(param)
ajax使用promise
const ajaxPromise = param =>{
return new Promise((resolve,reject)=>{
$.ajax({
url: param.url,
type: param.type||'get',
data: param.data || '',
async:param.async || true,
success: function(data){
resolve(data);
},
error: function(error){
reject(error)
}
})
})
}
let step1 = () =>{
return ajaxPromise({url: 'url1', type:'get'})
}
let step2 = () =>{
return ajaxPromise({url: 'url2', type:'get'})
}
let step3 = () =>{
return ajaxPromise({url: 'url3', type:'post',data:'xxx'})
}
step1().then(function(res){
console.log(res);
return step2()
}).then(function(res){
console.log(res);
return step3()
}).then(function(res){
console.log(res);
}).catch(function(res){
console.log(res);
return
})
动画回调地狱
function ani1(){
//向左走
console.log('向左走');
setTimeout(function ani2(){
//向上走
console.log('向上走');
setTimeout(function ani3(){
//变大
console.log('变大');
//......
},1000)
},1000)
}
ani1()
promise实现多个动画
function an1(){
return new Promise(function(resolve, reject){
setTimeout(function(){
console.log('向上')
resolve()
},1000)
})
}
function an2(){
return new Promise(function(resolve, reject){
setTimeout(function(){
console.log('向下')
resolve()
},1000)
})
}
function an3(){
return new Promise(function(resolve, reject){
setTimeout(function(){
console.log('变大')
resolve()
},1000)
})
}
function an4(){
return new Promise(function(resolve, reject){
setTimeout(function(){
console.log('变圆')
resolve()
},1000)
})
}
an1().then(function () {
return an2()
}).then(function () {
return an3()
}).then(function () {
return an4()
})
- 这样写的优点：回调函数写成了链式写法，程序的流程可以看得很清楚，而且有一整套的配套方法，可以实现很多强大的功能。
promise的基本语法及高级用法
promise的基本语法
创建promise对象
- Promise构造函数要求传入一个函数，并且带有resolve和reject参数
- 这是两个约束Promise等待的函数，对应成功和失败的状态，
- 我们的需要处理的异步的逻辑代码在这个函数中进行
- 将所创建的promise对象作为异步方法的返回值，所有的状态就可以使用它提供的方法控制了
function asyncMethod(){
return new Promise(function(resolue,reject){
//这里是要处理的ajax、异步IO、回调动画等异步的代码
//回调中处理成功写resolve()处理失败写reject()
})
}
处理Promise状态 promise状态处理
- Promise.then()
- 可以接收两个参数，第一个参数是方法 1 处理成功的状态的函数，第二个参数是方法2 处理失败的状态的函数，第二个函数可以省略
- 处理promise对象成功状态并接收返回值，也可以处理失败状态并接收返回值
- Promise.catch()
- 处理失败状态并接收返回值，如同then的第二个函数（reject状态的回调）
- 另一个作用，在执行resolve时抛出异常不会卡死而是进入到catch中处理错误
Promise的链式写法 进阶：链式写法原理
即.then(onfulfilled)或.catch(rejected)会处理在onfulfilled或rejected抛出或返回的值
promiseA+ 原理
- 如果onfulfilled或 onrejected中所返回的值是一个 Promise对象,则该 Promise对象会被加入到 Promise的处理链中。
- 如果 unfulfilled或 onreiected中返回的值并不是一个 Promise对象,则会返回一个已经进入成功状态的 Promise对象
- 如果onFulfilled或 onrejected中因为 throw语句而抛出一个错误err,则会
返回一个已经进入失败状态的 Promise对象 - 如果 Promise对象链中的某一环出现错误, Promise对象链便会从出错的环节开始,不断向下传递,直到出现任何一环的 Promise对象对错误进行响应为止。
animate ()
.then(()=> animate2())
.then(()=> animate3())
.then(()=> animate4())
.catch(err =>{
console. error(err)
return animate5()
})
.then(/*...*/)
.catch(err=>console, error(err))
Promise高级使用方法 .all .race .reject .resolve 方法原理
- Promise.all(需要处理的异步函数的数组);
- 数组中所有的对象都处于成功状态。那么all方法返回的promise对象也会进入成功状态，并以一个可迭代的对象承载其中所有的返回值
- 如果数组中有一个失败了，那么all方法返回的promise对象会进入失败状态，并以失败的那个错误信息当做promise对象自己返回的错误信息
const promises=[async(1),async(2),async(3),async(4)];
Promise.all(promises).then(function(){
console.log(value);
})
var p1 = Promise.resolve(3);
var p2 = 1337;
var p3 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, 'foo');
});
Promise.all([p1, p2, p3]).then(values => {
console.log(values); // [3, 1337, "foo"]
});
- Promise.race(需要处理的异步函数的数组);
只要有异步的函数执行完成就可以在then中执行回调中拿到的数据，同时没有完成的回调继续执行。
var p1 = new Promise(function(resolve, reject) {
setTimeout(resolve, 500, "one");
});
var p2 = new Promise(function(resolve, reject) {
setTimeout(resolve, 100, "two");
});
Promise.race([p1, p2]).then(function(value) {
console.log(value); // "two"
// 两个都完成，但 p2 更快
});
var p3 = new Promise(function(resolve, reject) {
setTimeout(resolve, 100, "three");
});
var p4 = new Promise(function(resolve, reject) {
setTimeout(reject, 500, "four");
});
Promise.race([p3, p4]).then(function(value) {
console.log(value); // "three"
// p3 更快，所以它完成了
}, function(reason) {
// 未被调用
});
var p5 = new Promise(function(resolve, reject) {
setTimeout(resolve, 500, "five");
});
var p6 = new Promise(function(resolve, reject) {
setTimeout(reject, 100, "six");
});
Promise.race([p5, p6]).then(function(value) {
// 未被调用
}, function(reason) {
console.log(reason); // "six"
// p6 更快，所以它失败了
});
- Promise.reject() //只抓取失败的
Promise.reject(new Error('fail')).then(function() {
// not called
}, function(error) {
console.log(error); // Stacktrace
});
- Promise.resolve() //只抓取成功的
Promise.resolve('Success').then(function(value) {
console.log(value); // "Success"
}, function(value) {
// not called
});
一个不错的地址
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
兼容情况
在浏览器端，一些主流的浏览器都已经可以使用 Promise 对象进行开发，在 Node.js 配合 babel 也可以很方便地使用。
如果要兼容旧的浏览器，建议可以寻找一些第三方的解决方案，例如 jQuery 的 $.Deferred。
