js异步、回调函数解读

一、异步的定义
js是单线程语言，执行任务的情况是根据任务顺序，前一个任务完成之后执行下一个任务。异步就是改变事件的执行顺序。
举个例子

    var f1 = function (){
        setTimeout(function () {
            console.log(1);
        },1000);
        console.log(2);
    };
    f1 ();

此时完成一个最简单的异步。

二、异步的用法（只讲回调函数、promise和anysc）
2.1回调函数
回调函数，把一个函数当作参数传进另一个函数中去执行，形成回调。

    var f1 = function (callback) {
        callback();
        console.log('1');
    };
    
    f1(function(){
        console.log('2');
    })

此时完成一个最简单的回调函数。回调函数的应用场景，需要顺序执行函数，或者增加代码的可变性。回调函数只是因为函数调用的方式不同而被称为回调函数，其本质和普通函数没有任何区别。

2.2promise

let n = 1;
let m = 1;
    function add() {
        return new Promise(function(resolve,reject){
            console.log(n);
            setTimeout(() => {
                n++;
                resolve(m*10);
            },1000)
        })
    }

    add().then(add).then(add).then(function(date){
        console.log(date)});
//打印结果1 2 3 10

一个Promise带有2个参数resolve和reject，代表着2个状态，Promise执行的结果，resolve或者reject。上面代码可以就是一个简单的Promise，1秒后返回reslove(m*10)，但时最后一步可以看得出，reslove()的作用只是携带参数返回。一个Promise执行结果reslove或者reject的话，会返回一个Promise对象并携带reslove(或rejcet中的参数。

axios就是一个Promise的用法

axios.get(’/user?ID=12345’)
.then(function (date) {
console.log(date);
})
.catch(function (error) {
console.log(error);
});

axios是一个Promise对象，在执行完成之后会返回一个Promise对象指向resolve(date)或者reject(error)。

关键点，Promise本身是一个函数，其本身执行完成后，会转化成resolve或者reject状态返回出去，.then可以进行链式调用，对象为前一个Promise的reslove(date)，.catch可以获取reject状态的参数reject(error)。

2.3async
async说白了就是Promise的简写版，任意一个函数前面加上async，那么这个函数就会变成一个Promise对象。

let n = 1;
let m = 1;
async function add (){
    console.log(n);
    try {
        await new Promise((resolve,reject) => {
            setTimeout(() => {
                n++;
                resolve(m*10);
            },1000)
        })
    }catch (error) {
        console.log(error);
    }
        return m*100
    }

add().then(add).then(add).then( date => {
    console.log(date);
});
//打印1 2 3 4 100

和Promise区别：
1await后接的函数，代表该函数执行完再执行后续步骤。
2async指向reject需要在函数内加成try{} catch(error){] 捕获错误。
3async中return的参数等同于Promise中resolve效果，即作为参数传递至下一个.then中。
4async的reject状态直接在函数内体现，而不影响后续执行。
但是其本质以及用法和Promise没有太大区别。

三、异步的作用
其实异步方法还有很多，不一一说明。异步的作用，可以说是精确控制函数执行的顺序、合理利用系统内存以加快页面加载。