主要談及： 是什么头滔，怎么做蝠检，如何實現(xiàn)
一沐鼠、setTimeout函數(shù)依次執(zhí)行的傳統(tǒng)方法
function fn1(){
setTimeout(()=>{
console.log('fn1')
},1000)
}
function fn2(){
setTimeout(()=>{
console.log('fn2')
},1000)
}
function fn3(){
setTimeout(()=>{
console.log('fn3')
},1000)
}
二、實現(xiàn)異步函數(shù)的順序執(zhí)行
對上面的代碼進(jìn)行封裝叹谁，形成一種回調(diào)地獄
<script>
function fn1(callback){
setTimeout(()=>{
console.log('fn1')
callback()
},1000)
}
function fn2(callback){
setTimeout(()=>{
console.log('fn2')
callback()
},1000)
}
function fn3(callback){
setTimeout(()=>{
console.log('fn3')
},1000)
}
fn1(function(){
fn2(function(){
fn3()
})
})
</script>
分別在每一秒后執(zhí)行fn1饲梭、fn2、fn3
注：可直接采用return出一個new的函數(shù)焰檩，減少代碼量
function fn1(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log('fn1...')
resolve()
},1000)
})
}
function fn2(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log('fn2...')
resolve()
},1000)
})
}
function fn3(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log('fn3')
resolve()
},1000)
})
}
function onerror(){
console.log('error')
}
fn1().then(fn2).then(fn3).catch(onerror)
三憔涉、（ES6）Promise
參考文檔：阮一峰、MDN
1析苫、promise是什么
promise實質(zhì)是一個函數(shù)兜叨，通過這個函數(shù)創(chuàng)建一個promise對象
這個promise對象里存儲一個狀態(tài)，可以隨著內(nèi)部執(zhí)行而轉(zhuǎn)化衩侥，是三者之一的狀態(tài)国旷，分別為：
等待態(tài)/初始態(tài)(Pending)、完成態(tài)(Fulfilled)茫死、拒絕態(tài)(Rejected)
設(shè)想先設(shè)置這樣一條預(yù)案：設(shè)置好等狀態(tài)從pending變成fulfilled和rejected的預(yù)案（當(dāng)成功后我們做什么跪但，失敗時我們做什么），具體如下：
當(dāng)Promise啟動后峦萎，
滿足成功的條件時我們讓狀態(tài)從pending變成fulfilled（執(zhí)行resolve）
滿足失敗的條件時我們讓狀態(tài)從pending變成rejected（執(zhí)行reject）
2屡久、promise的使用
- 第一種方式：動態(tài)調(diào)用
promise鏈?zhǔn)秸{(diào)用：Promise.prototype.then/Promise.prototype.catch
// 采用ajax異步回調(diào)的方式改裝成promise
function getIp(){
var promise = new Promise(function(resolve,reject){
var xhr = new XMLHttpRequest()
xhr.open('GET','https://easy-mock.com/mock/5ac2f80c3d211137b3f2843a/promise/getIp', true) //設(shè)置一個ajax的參數(shù))
xhr.onload = function(){
var retJson = JSON.parse(xhr.responseText) // {"ip":"58.100.211.137"} 數(shù)據(jù)到來對數(shù)據(jù)進(jìn)行解析
resolve(retJson.ip) //初始化-完成狀態(tài)-變?yōu)槌晒顟B(tài)
}
xhr.onerror = function(){
reject('獲取IP失敗') //初始化-拒絕狀態(tài)-變?yōu)槭顟B(tài)
}
xhr.send()
})
return promise
}
function getCityFromIp(ip){
var promise = new Promise(function(resolve,reject){
var xhr = new XMLHttpRequest()
xhr.open('GET','https://easy-mock.com/mock/5ac2f80c3d211137b3f2843a/promise/getCityFromIp?ip='+ip, true)
xhr.onload = function(){
var retJson = JSON.parse(xhr.responseText) // {"city": "hangzhou","ip": "23.45.12.34"}
resolve(retJson.city)
}
xhr.onerror = function(){
reject('獲取city失敗')
}
xhr.send()
})
return promise
}
function getWeatherFromCity(city){
var promise = new Promise(function(resolve,reject){
var xhr = new XMLHttpRequest()
xhr.open('GET','https://easy-mock.com/mock/5ac2f80c3d211137b3f2843a/promise/getWeatherFromCity?city='+city, true)
xhr.onload = function(){
var retJson = JSON.parse(xhr.responseText) // {"weather": "晴天","city": "beijing"}
reslove(retJson)
}
xhr.onerror = function(){
reject('獲取天氣失敗')
}
xhr.send()
})
return promise
}
// getIp獲取IP-IP獲取城市-城市獲取天氣
getIp().then(function(ip){
return getCityFromIp(ip) // 得到ip
}).then(function(city){
return getWeatherFromCity(city) // 得到城市
}).then(function(){
console.log(data) // 得到具體的城市其他狀況（如天氣、人口等等）
}).catch(function(e){
console.log('出現(xiàn)了錯誤'爱榔，e)
})
面對對象時被环，我們new一個構(gòu)造函數(shù)，就會創(chuàng)建一個對象（實例）
當(dāng)我們調(diào)用getIp時详幽，我們就得到當(dāng)時創(chuàng)建的這個Promise對象
啟動Promise時蛤售，就預(yù)設(shè)resolve和reject的方案，在then函數(shù)中進(jìn)行預(yù)案的配置
假如妒潭，一旦在promise啟動resolve的方案，那么在then函數(shù)中就執(zhí)行對應(yīng)的成功預(yù)案揣钦，同時雳灾，將resolve的參數(shù)放在then對應(yīng)成功預(yù)案中進(jìn)行執(zhí)行獲取冯凹；如果是失敗狀態(tài)就會執(zhí)行reject方案谎亩，相對應(yīng)會執(zhí)行then里面的catch（相對應(yīng)會有失敗的參數(shù)）
- 第二種方式：promise的靜態(tài)方式
promise.all
all,語義化理解炒嘲，當(dāng)全部對象執(zhí)行完成狀態(tài)后再進(jìn)行結(jié)果的輸出
function getCityFromIp(ip){
var promise = new Promise(function(reslove,reject){
var xhr = new XMLHttpRequset()
xhr.open('GET','https://easy-mock.com/mock/5ac2f80c3d211137b3f2843a/promise/getCityFromIp?ip='+ip, true)
xhr.onload = function(){
var retJson = JSON.parse(xhr.responseText) // {"city": "hangzhou","ip": "23.45.12.34"}
reslove(retJson)
}
xhr.onerror = function(){
reject('獲取city失敗')
}
xhr.send()
})
return promise
}
// 一下對應(yīng)的是三個promise對象
var p1 = getCityFromIp('10.10.10.1')
var p2 = getCityFromIp('10.10.10.2')
var p3 = getCityFromIp('10.10.10.3')
// Promise.all, 當(dāng)所有的Promise對象都完成后再執(zhí)行
Promise.all([p1,p2,p3]).then(data=>{
console.log(data)
})
發(fā)3個請求，同時獲取數(shù)據(jù)匈庭，獲得一個拼裝好的數(shù)組夫凸，可以處理多個功能請求。
promise.race
race,從語義化的角度來說阱持，具有“競賽”的意味夭拌。即所請求的數(shù)據(jù)誰先獲取，那輸出結(jié)果就是誰
function getCityFromIp(ip) {
var promise = new Promise(function(resolve, reject){
var xhr = new XMLHttpRequest()
xhr.open('GET', 'https://easy-mock.com/mock/5ac2f80c3d211137b3f2843a/promise/getCityFromIp?ip='+ip, true)
xhr.onload = function(){
var retJson = JSON.parse(xhr.responseText) // {"city": "hangzhou","ip": "23.45.12.34"}
resolve(retJson)
}
xhr.onerror = function(){
reject('獲取city失敗')
}
setTimeout(()=>{
xhr.send()
}, Math.random()*1000)
})
return promise
}
var p1 = getCityFromIp('10.10.10.1')
var p2 = getCityFromIp('10.10.10.2')
var p3 = getCityFromIp('10.10.10.3')
//Promise.all, 當(dāng)所有的 Promise 對象都完成后再執(zhí)行
Promise.race([p1, p2, p3]).then(data=>{
console.log(data)
})
