Front-end asynchronous

Asynchronous front-end workflow tools

1. Traditional native asynchronous:

Callback
event

2. Using asynchronous workflow tools (others packaged stuff)
ES6 Promise
Promise asynchronous programming is a solution than traditional solutions - callback functions and events - more rational and more powerful. It was first put forward by the community and realize, ES6 be written into the standard language, unified grammar, native in the Promise

The so-called Promise, it simply is a container, which holds a future back before the end of the event (usually an asynchronous operation) results. Syntactically, Promise is an object, you can get messages from the asynchronous operation of it.
State Promise objects from external influences

Three states:

pending: Ongoing
fulfilled: has been successfully
rejected already failed
state change:
state Promise object changes, only two possibilities:

From pending changes to fulfilled
from pending changes to rejected.
As long as these two cases occurred on the solidification state, will not be changed, then called resolved (finalized)

const p1 = new Promise(  (resolve,reject ) => {
 resolve('任务一')
}).then ( data => {
 console.log( data )
})

const p3 = new Promise( ( resolve,reject ) => {
 setTimeout( () => {
     resolve('任务三')
 },2000)
}).then ( data => {
 console.log(data)
})

const p2 = new Promise( (resolve,reject) => {
 setTimeout( () => {
     resolve('任务二')
 },1000 )
}).then ( data => {
 console.log(data)
})

console.log('主线程任务')

// 主线程任务
// 任务一
// 任务二
// 任务三

es6 generator function
after the function key plus a * functions defined in this way is called a generator function
is defined by the yield keyword tasks
to perform tasks via the Fn (). the Next ()
value represents the results of tasks performed after the yield keyword
done indicates that the current a state whether all the tasks defined execution complete
understanding:
the definition of multi-tasking, multi-tasking
allows multiple tasks in order to perform their own definition, if a task is not completed, the next task will not start

function* fn () {
    yield '任务一'
    yield '任务二'
    yield '任务三'
    return '任务'
}

const a = fn ()

console.log( a.next() )
console.log( a.next() )
console.log( a.next() )
console.log( a.next() )
console.log('主线程任务')

// { value: '任务一', done: false }
// { value: '任务二', done: false }
// { value: '任务三', done: false }
// { value: '任务', done: true }
// 主线程任务

es6 (7) async function
with the use of keywords await, await says wait, after a task execution ends, will perform two tasks

async function fn () {
    const result = await '任务一'
    console.log( result )
    console.log('任务二')
}
fn()

const fn1 = async () => {
    const res = await '任务3'
    console.log( res )
    console.log( '任务四' )
}
fn1()

// 任务一
// 任务二
// 任务3
// 任务四

nextTick setImmudiate node.js in
nextTick> callback> setImmediate
priority nextTick () callback function to execute than setImmediate ();
process.nextTick () belongs to the idle observer, setImmediate () belongs to check every viewer. an inspection cycle, idle viewer prior to I / O observer, I / O viewer before the viewer check.
in the specific implementation, process.nextTick () callback is stored in an array,
setImmediate () the result is saved in the list.
in behavior, process.nextTick () callback function in a loop in each round will be an array of all executed.
and setImmediate () execute a callback function in the list in each cycle .

//加入2个nextTick()的回调函数
process.nextTick(function(){
console.log("nextTick延迟执行A");
});
process.nextTick(function(){
console.log("nextTick延迟执行B");
setImmediate(function(){
    console.log("setImmediate延迟执行C");
});
process.nextTick(function(){
    console.log("nextTick延迟执行D");
});
});
//加入两个setImmediate()回调函数
setImmediate(function(){
console.log("setImmediate延迟执行E");
process.nextTick(function(){
    console.log("强势插入F");
});
setImmediate(function(){
    console.log("setImmediate延迟执行G");
});
});
setImmediate(function(){
console.log("setImmediate延迟执行H");
process.nextTick(function(){
    console.log("强势插入I");
});
process.nextTick(function(){
    console.log("强势插入J");
});
setImmediate(function(){
    console.log("setImmediate延迟执行K");
});
});
console.log("正常执行L");

// 正常执行L
// nextTick延迟执行A
// nextTick延迟执行B
// nextTick延迟执行D
// setImmediate延迟执行E
// setImmediate延迟执行H
// setImmediate延迟执行C
// 强势插入F
// 强势插入I
// 强势插入J
// setImmediate延迟执行G
// setImmediate延迟执行K

Async.js third-party libraries
can be asynchronous, serial and parallel parallel series

const async = require( 'async' )

async.series({//串行series
  one: function ( callback ) {
    setTimeout( function () {
      callback( null, 1)
    },200)
  }, 
  two: function ( callback ) {
    setTimeout( function () {
      callback ( null , 2 )
    },100)
  } 
}, function ( error , results ) {
  console.log( 'series',results )
})

console.log( '主线程' )

async.parallel({//并行parallel
  one: function ( callback ) {
    setTimeout( function () {
      callback( null, 1)
    },200)
  }, 
  two: function ( callback ) {
    setTimeout( function () {
      callback ( null , 2 )
    },100)
  } 
}, function ( error , results ) {
  console.log( 'parallel',results )
})

// 主线程
// parallel { two: 2, one: 1 }
// series { one: 1, two: 2 }

In other words:
asynchronous processes asynchronous task is placed in the queue, the queue only take asynchronous execution in the main thread after executing the
reference
Promise https://blog.csdn.net/MrJavaweb/article/details/79475949
Generator HTTPS: //www.cnblogs.com/imwtr/p/5913294.html
the Async-the await
Node.js in nextTick () and setimmediate () https://www.cnblogs.com/5ishare/p/5268273.html
the async library https : //caolan.github.io/async/
reference documentation
Event-Loop
http://www.ruanyifeng.com/blog/2014/10/event-loop.html?bsh_bid=983729729
history of the most easy to read and understand Promise / a + fully realized
https://zhuanlan.zhihu.com/p/21834559

Front-end asynchronous

Asynchronous front-end workflow tools

Guess you like