[ JavaScript ] 异步操作之 promise | async / await

Promise 的简单使用

• 新建一个测试文件

{
    "name":"aowei"
}

• promise 的使用非常简单，直接new出来即可

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script>
        
        let promise = new Promise(function(resolve,reject){
            // Promise的参数是一个函数
            // 这个函数有两个参数。resolve/reject
            // 成功，回调resolve
            // 失败，回调reject
            
            $.ajax({
                url: './aowei.txt',
                dataType: 'json',
                success(arr){
                    resolve(arr)
                },
                error(res){
                    reject(res)
                }
            })
        })
        // then() 有两个参数，
        // 成功的回调函数，失败的回调函数
        promise.then(function(arr){
            alert('成功')
            console.log(arr)
        },
        function(res){
            console.log('失败')
        })
        // 捕获异常
        promise.catch(res => console.log(res))

• promise 同时处理多个请求

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script>
    	// all() 里面放数组，数组里面要求放的是promise对象  
        // ajax 本身返回的就是一个promise
       let promise = Promise.all([
           $.ajax({url:'./aowei.txt',dataType:'json'}),
           $.ajax({url:'./aowei1.txt',dataType:'json'}),
           $.ajax({url:'./aowei2.txt',dataType:'json'})
       ])
       promise.then(arr => {
           alert('成功')
           // 解构赋值
           let [data,data1,data2] = arr
           console.log(arr)
           console.log(data)
           console.log(data1)
           console.log(data2)
       },res => {
            alert('失败')
           console.log(res)
       })
    </script>

async / await

---

• async / await 的简单使用

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script>
    // 函数的特殊形式
    // async 声明我这个函数中是包含异步操作的
    // await 给异步操作加 await

    async function show(){
        let a = 'aaa'
        let b = 'bbb'
        let data = await $.ajax({ url: './aowei.txt',dataType:'json' })
        // 字符串模板
        console.log(`${a}${b}${data.name}`)
    }
    show()
    </script>

• 使用 try / catch 捕获异步操作的异常

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script>
    // 函数的特殊形式
    // async 声明我这个函数中是包含异步操作的
    // await 给异步操作加 await

    async function show(){
        let a = 'aaa'
        let b = 'bbb'
        let data
        try {
            data = await $.ajax({ url: './aowei.txt',dataType:'json' })
        } catch (error) {
            console.log('读取出错')
        } finally {
            console.log('读取结束')
        }
        
        // 字符串模板
        console.log(`${a}${b}${data.name}`)
    }
    show()
    </script>

---