WEB开发

callback,Promise,Generatol,async

2018-11-26  本文已影响0人  情有千千节

参考链接

因为js是单线程语言，所以在遇到一些耗时比较久的任务的时候，如果继续按照顺序执行，就会造成线程的阻塞。所以这个时候就需要用到异步来解决问题。
可以简单地将js中的任务划分为同步任务，异步任务。

  1. 同步任务：
  2. 异步任务：
function demo () {
    setTimeout({
        console.log(1)
    },1000)
}

demo()

console.log(2)


最终运行结果 

2
1

异步的解决办法

1. callback

function demo(callback) {
    setTimeout({
        console.log(1)
        callback()
    },1000)
}

function callback() {
    console.log(2)
}

demo()

运行结果
1
2

callback这种模式比较容易理解，但缺点也很明显

  1. 回调地狱，高耦合，维护起来比较困难
  2. 每个任务只能执行一个回调函数
  3. 如果几个异步之间没有顺序之分，同样也要等上一个操作完成之后才能继续
回调地狱
getdata(a=>{
    getMoreData(a,b=>{
        getMoreData(b,c)=>{
            getMoreData(c,d)=>{
                getMoreDate(d,e)=>{
                    console.log(e)
                }
            }
        }
    })
})

2.Promise 通过then的链式吊用进行一步步

  1. new Promise(cb) ===>实例的最基本的使用 pending(进行中) resolved(已成功) rejected(已失败)
  2. 两个原型方法
    • Promise.prototype.catch()
    • Promise.prototype.then()
  3. 两个静态方法
    • Promise.all()
    • Promise.resolve()

Promise的个人理解，就是先许一个承诺（先开始干，不管结果），然后在后面通过resolve返回正确或者reject返回失败，这样多个回调就可以通过使用链式调用顺序来实现。then捕捉resolve，catch捕捉reject。
不论resolve还是reject 返回的都是promise
catch 和then 都会默认返回一个默认resolved状态的Promise对象

function delay(word) {
    return new Promise((reslove,reject)=>{
        setTimeout(()=>{
            // console.log(word);
            reslove(word)
        },2000)
    })
}

delay('孙悟空').then((word)=>{
    console.log(word)
    return delay('猪八戒')
}).then((word)=>{
    console.log(word)
    return delay('沙悟净')
}).then((word)=>{
    console.log(word)
})

=>
2s
孙悟空
2s
猪八戒
2s
沙悟净
  1. .then可以使用链式调用，原因在于：每一次执行该方法时总会返回一个Promise对象。
    另外，在then的函数当中的返回值，可以作为后续操作的参数
  2. 关于执行顺序：Promise在实例化的时候就会执行，也就是如果Promise的实例化语句中函数console.log输出语句，它会比then中的先执行。Promise.all中传入的Promise对象的数组（假设为p1、p2），即使p2的运行速度比p1快，Promise.all方法仍然会按照数组中的顺序将结果返回。

3.Generatol函数

function* fn() {
    console.log(1)
    let v =  yield getData()
    console.log(v)
    console.log(3)
}
function getData() {
    setTimeout(() => {
        console.log(2)
        f.next(100)
    }, 1000)
}
<!-- 返回一个迭代函数 -->
let f = fn()

f.next() 
===> 1
<!-- 1000ms后 -->
2
100
3

4. async await

async+await 要一起使用，async定义函数 await要在async函数内部使用，等待一个异步结束

async function start () {
    const w1 = await delay('孙悟空')
    console.log(w1)
    const w2 = await delay('猪八戒')
    console.log(w2)
    console w3 = await delay('沙悟净')
    console.log(w3)
}
start()
<!-- 等你前面结束才执行后面代码 -->

=>
2s
孙悟空
2s
猪八戒
2s
沙悟净
上一篇 下一篇

猜你喜欢

热点阅读