前端技术-ES6（10）

promise-async await

function ajax(url){
return new Promise(function(resolve, reject){
var xhr = new XMLHttpRequest();
xhr.open(‘GET’,url)
xhr.responseType = ‘json’
xhr.onload = function(){
if(this.status === 200){
resolve(this.response)
}else{
reject(new Error(this.statusText))
}
}
xhr.send()
})
}

// let pro = null

let pro2 = ajax(’/ES6.json’).then(function(res){
console.log(res)
return ajax(’/urls.json’)
},function(err){
console.log(err)
})
//注意！！！这里的res，时上一步ajax(’/urls.json’)的结果
pro2.then(function(res){
console.log(res)
})

//建议用catch指定失败时的处理函数
let pro4 = ajax(’/ES6.js’).then(function(res){
return ajax(’/ES61111.js’)//111 not exist
},function(err){
console.log(err)
})//这种时捕获不了异常的

//then方法里面可以只放一个成功的处理函数
let pro5 = ajax(’/ES6.js’).then(function(res){
return ajax(’/ES61111.js’)
}).catch(function(err){
console.log(err)
})
//这种时可以的，因为catch时注册在新返回的promise p上的。
//这里注意p不是指的ajax(’/ES61111.js’)这个
//是指的 ajax(’/ES6.js’).then注意时这里的then返回的新的promise。。。

//primise上的静态方法 all race

//异步执行：
var promise = Promise.all([
ajax(’/ES6.js’),
ajax(’/package.json’)
])
promise.then(function(){console.log(‘success’)})

ajax(’/urls.json’).then(values => {
const urls = Object.values(values)
console.log(“urls”, urls)
const tasks = urls.map(url => ajax(url))
return Promise.all(tasks)
}).then(values => {
console.log(values)
})

//promise.race方法，只要有一个结束，这个promise就会返回
//可以通过netWork里面的online把网速设置成slow 3G，网速变慢。。可以让500ms先完成
const request = ajax(’/ES6.js’)
const timeout = new Promise((resolve, reject ) => {
setTimeout(()=>{
reject(new Error(‘time out’))
}, 500)
})
Promise.race([
request,timeout
])
.then(value => {
console.log(value)
})
.catch(err => {
console.log(err)
})

//这种实现方式在git上已经有额，叫：https://github.com/tj/co
function * main(){
try{
const a = yield ajax(’/ES6.json’)
console.log(a)//这里应该时拿着a写代码逻辑就行啦！！
const b = yield ajax(’/urls.json’)
console.log(b)
}catch(e){
console.log(e)
}
}
function co(generator){
const g = generator()
//g.next().value.then(function(res){g.next(res)})
function handleResult(result){
if(result.done) return //生成器函数结束
result.value.then(res =>{
handleResult(g.next(res))
}, err=>{
g.throw(err)
})

}
handleResult(g.next())

}

// co(main)
//虽然co用法很好（2015以前很流行），但是后面出了Async、Await等原生的方法，同样可以实现扁平化开发多异步操作
//来看一下ECMAScript 2017引入的Async：
async function main(){
try{
const a = await ajax(’/ES6.json’)
console.log(a)//这里应该时拿着a写代码逻辑就行啦！！
const b = await ajax(’/urls.json’)
console.log(b)
}catch(e){
console.log(e)
}
}
const promi = main()
promi.then(re =>{
console.log(‘all complete!!’)
})
//总结，Async实际上就是promise和generator实现的语法糖，上面的co实现就是async的原理，这里只是作为js的标准被发布出来了，以后都可以使用这个。