前端异步编程-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41927760/article/details/96422088
                    
                        
                    
                    为什么要进行异步操作？ 
  javascript是单线程，依次执行一个任务，要想让任务能够顺利进行，我们需要排队
异步就是将任务放入异步队列，在主线程执行结束之后再去执行
 
前端异步的操作方式 
  传统方式 
    回调函数
事件
 
前端异步流程工具 【 封装出来函数、库 】 
    es6 Promise 
      Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）
 const p1 = new Promise(( resolve,reject ) => {
    resolve( '任务一' )
})
    .then( data => {
        console.log( data )
})
    .catch( error => {
      if ( error ) throw error   // 抛出一个错误，这个时候进程会被终端
})
 
      Promise.all([promise实例1，promise实例2])
all中，一次执行任务，即使有延时任务，也必须等待延时任务结束，后续任务才能进行Promise
Promise.race() ,数组中一个promise实例完成即完成
race指的是 任务快 的先进行，其他延时任务后续进行
 
es6 Generator函数 
      function 关键字后面跟一个*来定义一个generator函数
使用yield关键字来定义任务
 function* p1 () {
  // yield 任务
  yield '任务一'
  yield '任务二'
  return '任务六'
}

const task = p1() // 迭代器Iterator对象

console.log( task.next() ) // 通过next方法来遍历执行任务
console.log( task.next() ) // 通过next方法来遍历执行任务
// { value: '任务六', done: true } 

/* 
    value 表示任务执行的结果
    done  表示总任务执行状态 
*/
 
es6 - es8 async 函数async function p1 () {
    const result = await '任务一'
    return result 
}
console.log( p1().then( res => console.log( res )) )
console.log(' 主线程')

 
      async函数返回一个 Promise 对象。
async函数内部return语句返回的值，会成为then方法回调函数的参数。
 async function f() {
    return 'hello world';
}

f().then(v => console.log(v))
// "hello world"
 
      上面代码中，函数f内部return命令返回的值，会被then方法回调函数接收到。
async函数内部抛出错误，会导致返回的 Promise 对象变为reject状态。抛出的错误对象会被catch方法回调函数接收到。
 async function f() {
    throw new Error('出错了');
}

f().then(
    v => console.log(v),
    e => console.log(e)
)
// Error: 出错了
 
Node中的异步处理工具： nextTick setImmediate 
      Node.js全局变量是global
轮询的第一个是Process.nextTick() ，最后一个是setImmediate(),所以Process.nextTick()比setImmediate()先执行
 process.nextTick( () => {
    console.log('A')
})

setImmediate(() => {
    console.log('C')
})

console.log('主线程')

//结果顺序--主线程,A,C
 
第三方类库： async.js
 
 

                