异步与promise
同步
直接拿到结果，就是同步，不拿到结果不会离开
异步
不能直接拿到结果，不拿到结果，不会执行下面的代码
可以隔一段时间去问一下(轮询)
可以写一个函数接收结果通知(回调)
异步举例(以AJAX代码举例)
requset.send()之后,并不能直接得到response
必须等到readyState变成4之后,浏览器回头调用requset.onreadystatechange函数
我们才能得到requset.response
回调 callback
写给别人用的函数就是回调,自己写了却不调用,给别人调用的函数
requset.onreadystatechange就是我写给浏览器调用的,浏览器回头(未来)调用一下这个函数
回调举例1：把函数1给另一个函数2
function f1(){}
function f2(fn){
fn()
}
f2(f1)
我没用调用f1,我把f1传给f2了,f2调用了f1,所以f1是回调
回调举例2：f1中怎么会有一个x参数
function f1(x){
console.log(x)
}
function f2(fn){
fn('你好')
}
f2(f1)
调用f1时,会给f1传一个x，fn('你好')中的fn就是f1
fn('你好')中的'你好'会被赋值给x,所以x就是'你好',x表示第一个参数,可以改写任意名字
异步与回调的关系
关联
异步任务需要在得到结果时通知JS来拿结果（怎么通知呢）
让JS写留一个函数地址给浏览器，异步任务完成时，浏览器调用该函数地址就可以
同时把结果作为参数传给该函数
这个函数是我写给浏览器调用的，所以是回调函数
区别
异步任务需要用到回调来通知结果,但回调不一定只用在异步任务里,回调可以用到同步任务里
array.forEach(n =>console.log(n))就是同步回调
n是哪来的,forEach会调用这个函数,有多少个元素会调用多少次,并把第n个元素传给你
总结:先把一个函数留给它(浏览器),等它完成了会调用这个函数
调用的时候会把结果放到函数的参数里，就实现了异步的通知
异步和回调不一定同时都有,只是合作关系
判断一个函数是同步还是异步
如果一个函数的返回值处于
setTimeout
AJAX(即XMLHttpReqyest)
AddEventLisetener
这三个东西内部,那么这个函数就是异步函数
AJAX可以设置成同步的,把open接受的第三个参数写成false，变成同步，这样js的请求没回来
就不会执行下面的代码(不要把AJAX写成同步，代码执行完之前，页面会暂停不动)
摇骰子
function 摇骰子(){
setTimeout(()=>{
return parseInt(Math.random() * 6) + 1
},1000)
//return undefined
}
摇骰子()没有写return，那就是return undefined
箭头函数里没有return，返回真正的结果
所有这是一个异步函数
2个return属于不同的函数
摇骰子续
const n = 摇骰子()
console.log(n) //undefined
怎么拿到异步的结果
可以使用回调,写个函数,然后把函数地址给它
然后我要求摇骰子函数得到结果后把结果作为参数传给f1
function f1(x){console.log(x)}
摇骰子(f1)
function 摇骰子(fn){
setTimeout(()=>{
fn(parseInt(Math.random()*6)+1)
},1000)
}
简化箭头函数
function f1(x){console.log(x)}
摇骰子(f1)
改为
摇骰子(x => {
console.log(x)
})
在简化为
摇骰子(console.log)
参数的个数不一致就不能这样简化
const array = ['1','2','3'].map(parseInt)
console.log(array)
[1,NaN,NaN]
简化代码错误,只对item进行parseInt,等价于
parseInt(item,i,arr)
parseInt('1',0,arr) =>1
parseInt('2',1,arr) =>NaN //把2作为1进制的数进行解析
parseInt('3',2,arr) =>NaN //把3作为2进制的数进行解析
正确的是
const array = ['1','2','3'].map((item,i,arr) =>{
return parseInt(item)
})
const array = ['1','2','3'].map(item =>parseInt(item))
总结
异步任务不能拿到结果
于是我们传一个回调给异步任务
异步完成时调用回调
调用时把结果作为参数
异步任务有2个结果,成功和失败
方法一:回调接收2个参数
fs.readFile('./1.txt', (error, data)=>{
if(error){
console.log('失败');
return
}
console.log(data.toString())
})
方法二:写2个回调
ajax('get','/1.json', data=>{}, error=>{})
ajax('get', '/1.json', {
success: ()=>{}, fail: ()=>{}
})
这些方法有的不足
不规范,名称五花八门,有人用success+error,有人用success+fail,有人用done+fail
容易出现回调地狱，代码变得看不懂
很难进行错误处理
回调地狱举例(四层回调)
getUser( user => {
getGroups(user, (groups)=>{
groups.forEach( (g)=>{
g.filter(x => x.ownerId === user.id)
.forEach(x => console.log(x))
})
})
})
20层回调
规范回调的名字或顺序;拒绝回调地狱，让代码可读性更强;很方便捕获错误
使用Promise
Promise的用法
封装AJAX例子
ajax = (method, url, options)=>{
const {success, fail} = options
const request = new XMLHttpRequest()
request.open(method, url)
request.onreadystatechange = ()=>{
if(request.readyState === 4){
if(request.status < 400){
success.call(null, request.response)
}else if(request.status >= 400){
fail.call(null, request, request.status)
}
}
}
request.send()
}
ajax('get', '/xxx', {
success(response){}, fail:(request, status)=>{}
})
Promise写法
调用方法
ajax('get', '/xxx')
.then((response)=>{},(request, status)=>{})
虽然也是回调，但不需要记 success 和 fail
then 的第一个参数就是 success，then的第二个参数就是 fail
ajax()返回了什么
返回了一个含有.then()方法的对象
如何得到这个含有.then()方法的对象? 修改ajax的源码
ajax = (method, url, options)=>{
return new Promise((resolve, reject)=>{
const {success, fail} = options
const request = new XMLHttpRequest()
request.open(method, url)
request.onreadystatechange = ()=>{
if(request.readyState === 4){
if(request.status < 400){
resolve.call(null, request.response)
}else if(request.status >= 400){
reject.call(null, request)
}
}
}
request.send()
})
}
总结
第一步
return new Promise((resolve, reject)=>{}
任务成功则调用resolve(result)
任务失败则调用reject(error)
resolve和reject 会再去调用成功和失败函数
第二步
使用.then(success,fail) 传入成功和失败函数
详细资料点击：异步
