JavaScript异步编程

一、回调函数

为了实现JS中的异步操作，主要的解决方案就是利用回调函数的方法

回调函数是先调用，后定义的方式使用的。

如：

function d1(interval,callback){
    setTimeout(()=>{
        callback('hello world')
    },interval)
}

d1(1000,data=>{
    console.log(data)
})

二、Promise

Promise是ES6封装的对象,Promise对象可以化解回调地狱callback hell的情况。

Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。

一般用resolve来表示fulfilled

1.构造函数

1
2
3

new Promise((resolve,reject)=>{
    异步方法
})

注意：

构造函数中的函数参数会立即开始执行。也就是说，构造Promise时，异步方法就会开始执行。
resolve,reject是两个回调方法

2.then

最重要的API(then)。then是当构造函数中异步方法执行完毕后，才会执行的方法。then中的第一个参数就是构造函数中resolve的回调，第二个参数就是构造函数中的reject的回调：

then((data)=>{
    
},(err)=>{
    
})

3.then的链式调用

then可以链式调用，并且可以解决回调地域的问题。如果then中resolve的回调中有retuen Promise1对象，则当前then执行后返回一个Promise1对象。如：

封装一个fs模块下的readFileAPI:

let pFileR=(FilePath)=>{
    return  new Promise((resolve,reject)=>{
    fs.readFile(FilePath,'utf8',(err,data)=>{
        if(err){
            reject(err)
        }
        resolve(data)
    })
})
}

pFileR('./a.txt')
.then((data)=>{
    console.log(data)
    return pFileR('./b.txt')
})
.then((data)=>{
    console.log(data)
    return pFileR('./c.txt')
})
.then((data)=>{
    console.log(data)
})

4.应用场景

建立一个表单，给定用户名，得到该用户的年龄，和所有的工作信息，其中默认选择的是该用户选择的工作。

{
    User:[
      	id:Number,
      	name:String,
        job:Number
    ],
    Jobs:[
        id:Number,
        name:String
    ]
}

显然，我们要先根据ID请求对应User的完整数据，然后请求所有的工作信息，根据User下job的id,设置选中的工作。所以我们要先请求User,再请求Jobs。

安装：

json-server
http-server
jquery
art-template

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form action="" id="user_form">
       
    </form>
    <script type="text/template" id="tpl">
        <div>
                <label for="">用户名</label>
                <input type="text" value="{{ user.name }}">
            </div>
            <div>
                <label for="">年龄</label>
                <input type="text" value="{{ user.age }}">
            </div>
            <div>
                <label for="">职业</label>
                <select name="" id="">
                    {{ each jobs }}
                    {{ if user.id === $value.id }}
                        <option value="{{ $value.id }}" selected>{{ $value.name }}</option>
                    {{ else }}
                        <option value="{{ $value.id }}">{{ $value.name }}</option>
                    {{ /if }}
                    {{ /each }}
                </select>
            </div>
    </script>
    <script src="./node_modules/art-template/lib/template-web.js"></script>
    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <script>
        let get = (url,callback)=>{
            var oReq = new XMLHttpRequest()
            oReq.onload = ()=>{
                callback(oReq.responseText)
            }
            oReq.open("get",url,true)
            oReq.send()
        }
    </script>
</body>
</html>

4.1 回调嵌套的方法

get('http://localhost:3000/user/2',(userData)=>{
    get('http://localhost:3000/jobs',(jobsData)=>{
        let sH = template('tpl',{
            user:JSON.parse(userData),
            jobs:JSON.parse(jobsData)            
        })
        document.getElementById('user_form').innerHTML = sH  
    })    
})

4.2 封装Promise对象的get

let pGet = (url)=>{
            return new Promise((resolve)=>{
                get(url,(data)=>{
                    resolve(data)
                })
            })
        }

        let data = {}
        pGet('http://localhost:3000/user/2')
        .then((userData)=>{
            data.user = JSON.parse(userData)
            return pGet('http://localhost:3000/jobs')
        })
        .then((jobsData)=>{
            data.jobs = JSON.parse(jobsData)
            let sH = template('tpl',data)
            document.getElementById('user_form').innerHTML = sH
        })

4.3 调用jquery封装好的$.get方法

let data = {}
$.get('http://localhost:3000/user/3')
        .then((user)=>{
            data.user = user
            return $.get(`http://localhost:3000/jobs/$`)
        })
        .then((jobs)=>{
            data.jobs = jobs
            let sH = template('tpl',data)
            document.getElementById('user_form').innerHTML = sH
        })

三、async函数

3.1 async函数使用环境

async函数是为了实现对异步操作的控制而产生的。本身和Generator函数没有区别，实际上就是后者的语法糖。async函数配合await来代替Gennerator函数的*和yield。如果不了解Gennerator函数的话没有关系。直接从更好用的async开始学习。
以前对于异步操作的继发执行（比如：异步A执行完之后在执行异步B）都是使用函数嵌套的方式，后来上文中介绍的Promise对象，现在有了ES7中正式提出的async函数来控制异步函数。

3.2 async函数使用方式

在function前加入async声明该方法为async函数
在函数体中，在异步操作前加入await用以声明，一般该异步操作应当为Promise对象化的
在一个await声明后的异步操作时，整个async函数将会暂停向下执行，直到当前异步操作执行完毕后才会向下执行，但是当该异步操作出错时，async函数将会结束整个函数，并返回一个reject(err)的Promise对象。如果要实现，当异步出错时，也继续向下执行async函数的话，需要配合try..catch或.catch()使用。
async返回一个默认的promise对象，如果return一个promise对象的话则返回该Promise对象，如果return一个其他数据的的话则返回一个Promise对象，且该对象的resolve的参数为当时return的数据

3.3 async函数实现异步继发执行

function sleep(interval) {
    return new Promise(resolve => {
      setTimeout(resolve, interval);
    })
  }
  
  // 用法
  async function one2FiveInAsync() {
    for(let i = 1; i <= 5; i++) {
        await sleep(1000);  //实际上就是暂停one2FiveInAsync函数1s后再继续执行
      	console.log(i); 
    }
  }
  
  one2FiveInAsync()

/*
	result:
	after 1s : 1
	....
	after 5s : 5
*/

3.4 实现异步出错处理

3.4.1 使用try-catch捕获异常

在下面这个例子中，放在同一个try中的当遇到一个await定义的异步后将被catch捕获异常，然后跳出try,继续向下执行，当遇到没有在try中的await定义的异步出错时，退出了整个async函数

//try..catch方式
async function a(){
	try{
		await Promise.reject('出错啦1')
		await Promise.reject('出错啦2')
	}catch(e){
		console.log(e)
	}
	await Promise.reject('出错啦3')
	await Promise.resolve('成功啦')
}

a().then(d=>{console.log(d)})
.catch(e=>{console.log(e)})

/*
	result:
		出错啦1
		出错啦3
*/

3.4.2 使用catch方法捕获异常

async function a(){
    await Promise.reject('出错啦！1').catch(e=>{console.log(e)})
    await Promise.reject('出错啦！2').catch(e=>{console.log(e)})
    await Promise.resolve('成功啦')
}
a()
.then(d=>{console.log(d)})
.catch(e=>{console.log(e)})

/*
	result:
		出错啦！1
		出错啦！2
		undefined
*/

3.5 实现异步的类并发执行

类并发执行，即非继发执行。在async中实现类并发，可以配合Promise.all方法使用

1	await Promise.all([Example1(),Example2()])