前端异步的相关问题

\1. 为什么要进行异步操作？

javascript是单线程，依次执行一个任务，要想让任务能够顺利进行，我们需要排队

异步就是将任务放入异步队列，在主线程执行结束之后再去执行

\2. 前端异步的操作方式

​ - 传统方式

​ - 回调函数

​ - 事件

​ - 前端异步流程工具 【 封装出来函数、库 】

​ - es6 Promise

promise.js
*/

const p1 = new Promise(( resolve,reject ) => {
resolve( ‘任务一’ )
}).then( data => {
console.log( data )
})
.catch( error => {
if ( error ) throw error // 抛出一个错误，这个时候进程会被终端
})

const p2 = new Promise(( resolve,reject ) => {
setTimeout(() => {
resolve( ‘任务二’ )
},2000)
}).then( data => {
console.log( data )
})
.catch( error => {
if ( error ) throw error // 抛出一个错误，这个时候进程会被终端
})

/* // Promise.all([promise实例1，promise实例2])
// all中，一次执行任务，即使有延时任务，也必须等待延时任务结束，后续任务才能进行
Promise
.all([p1,p2])
.then( () => {
console.log( ‘任务三’ )
})
*/

Promise
.race([p1,p2]) // race指的是 任务快 的先进行，其他延时任务后续进行
.then(() => {
console.log(‘任务三’)
})

console.log(‘主线程’)

​ - es6 Generator函数

​ - es6 - es8 async 函数

​ - Node中的异步处理工具： nextTick setImmediate

​ - 第三方类库： async.js

\1. Generator

​ https://www.cnblogs.com/imwtr/p/5913294.html

/*
generator生成器函数

* function 关键字后面跟一个*来定义一个generator函数
* 使用yield关键字来定义任务

*/

function* p1 () {
// yield 任务
yield ‘任务一’
yield ‘任务二’
yield ‘任务三’
yield ‘任务四’
yield ‘任务五’
return ‘任务六’
}

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

console.log( task.next() ) // 通过next方法来遍历执行任务
console.log( task.next() ) // 通过next方法来遍历执行任务
console.log( task.next() ) // 通过next方法来遍历执行任务
console.log( task.next() ) // 通过next方法来遍历执行任务
console.log( task.next() ) // 通过next方法来遍历执行任务
console.log( task.next() ) // 通过next方法来遍历执行任务

// { value: ‘任务六’, done: true }

/*
value 表示任务执行的结果
done 表示总任务执行状态
*/

\2. Async-await

​ - 里层请求数据结果返回到外层使用

第一个文件：status.js

const request = require( ‘request’ )

const status = {
init () {
return new Promise(( resolve,reject ) => {
request( ‘接口’, ( a,b,c ) => {
resolve( c )
})
})

}
}

module.exports = {
init: status.init
}

第二个文件

const { init } = require( ‘./status.js’ )//引入第一个文件

/* const p1 = () => {
const result = init().then( res => console.log( res ))
return result
}

p1() */

// --------------- 以上是小程序数据请求封装 ----------------

const p1 = async () => {
const result = await init()
console.log( result )
}

console.log( p1() )

// --------------------- vue angular react -------------

​ - Async函数式generator函数 + spawn 自动执行器函数的 封装

\3. Node.js 中的nextTick()和setimmediate()

​

/*
Node.js中的异步流程工具

javascript全局变量是window对象
Node.js全局变量是 global

*/

process.nextTick( () => {
console.log(‘A’)
})

setImmediate(() => {
console.log(‘C’)
})

process.nextTick( () => {
console.log(‘B’)
})

console.log( ‘主线程任务’ )

\4. async库

​

/* 、
多任务执行

*/
const { series,parallel } = require(‘async’)

// series 表示 串行

// series([任务一,任务二],callback)
// 串行： 表示两个任务在一个任务线上，任意一个任务崩溃，其余任务全部无法执行

series([
function ( callback ) {
callback( null, ‘任务一’)
},
function ( callback ) {
setTimeout(() => {
callback( null, ‘任务二’)
},2000)
}
],function (error,result ) {
console.log(‘任务六’)
console.log( result )
})

// parallel 并行
parallel([
function ( callback ) {
callback( null, ‘任务三’)
},
function ( callback ) {
setTimeout(() => {
callback( null, ‘任务四’)
},2000)
}
],function (error,result ) {
console.log(‘任务五’)
console.log( result )
})

console.log(‘主线程’)