异步编程

同步模式与异步模式

同步模式

同步模式指的是代码中的任务依次执行，后一个任务必须等前一个任务执行完毕后才能执行

console.log('global begin')
function bar () {
    console.log('bar task')
}
function foo () {
    console.log('foo task')
    bar()
}
foo()
console.log('global end')

// 输出结果
global begin
foo task
bar task
global end
复制代码

异步模式

异步模式：不会等待这个任务的结束才开始下一个任务，对于耗时操作都是开启过后就立即往后执行下一个任务，后续逻辑一般会通过回调函数的方式定义

console.log('global begin')
setTimeout(function timer1 () {
    console.log('timer1 invoke')
}, 1800)
setTimeout(function timer2 () {
    console.log('timer2 invoke')
    setTimeout(function inner () {
        console.log('inner invoke')
    }, 1000)
}, 1000)
console.log('global end')

// 输出结果
global begin
global end
timer2 invoke
timer1 invoke
inner invoke
复制代码

回调函数–所有异步编程方案的根基

回调函数：由调用者定义，交给执行者执行的函数

function foo(callback){
    setTimeOut(fucntion(){
        callback()
    },1000)
}

foo(function(){
    console.log('这就是一个回调函数')
    console.log('调用这定义这个函数，执行者执行这个函数')
    console.log('其实就是调用者告诉执行者异步任务结束后做什么')
})
复制代码

Promise

Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息。

Promise 对象有以下两个特点:

1、**对象的状态不受外界影响。**Promise 对象代表一个异步操作，有三种状态：

• pending: 初始状态，不是成功或失败状态。
• fulfilled: 意味着操作成功完成。
• rejected: 意味着操作失败。

只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。

2、**一旦状态改变，就不会再变，任何时候都可以得到这个结果。**Promise 对象的状态改变，只有两种可能：从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。

promise的使用案例

// promise方式的ajax

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()
    })
}

ajax('/api/user.json').then(function(res){
    console.log(res)
},function(err){
    console.log(err)
})
复制代码

promise链式调用

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()
    })
}

ajax('/api/user.json').then(function(res){
    console.log(111)
    return ajax('/api/user.json')
}).then(function(res){
    console.log(222)
    console.log(res)
    return ajax('/api/user.json')
}).then(function(res){
    console.log(333)
    return ajax('/api/user.json')
}).then(function(res){
    console.log(444)
    return 'foo'
}).then(function(res){
    console.log(555)
    console.log(res)
})


//输出信息
111
222
{users:'/api/users.json',posts:'/api/users.json'}
333
444
555
foo
复制代码

Promise对象的then方法返回一个全新的Promise对象

后面的then方法就是在为上一个then返回的Promise注册回调

前面的then方法中回调函数的返回值会作为后面then方法回调的参数