JavaScript非同步程式設計中async函數詳解

<script>
    async function fn(){
        // 返回的結果是字串
        // return '123'
        // // 返回的結果是undefined
        // return;
        // 返回的結果是丟擲一個異常
        throw new 'error'
    }
    const result = fn()
    console.log(result);
</script>

<script>
    async function fn(){
        return new Promise((resolve,reject)=>{
            // resolve('成功的資料')
            reject('失敗的資料')
        })
    }
    const result = fn()
    // 呼叫 then 方法
    result.then((value)=>{
        console.log(value);
    },(reason)=>{
        console.log(reason); // 列印失敗的資料
    })
</script>

<script>
    const p = new Promise((resolve,reject)=>{
        // resolve('使用者資料')
        reject('使用者載入資料失敗了')
    })
    async function fn(){
        // 為防止promise是失敗的狀態，加上try...catch進行異常捕獲
        try {
            // await 返回的結果就是 promise 返回成功的值
            let result = await p
            console.log(result);
        } catch (error) {
            console.log(error);//因為是失敗的狀態，所以列印：使用者載入資料失敗了
        }
    }
    fn()
</script>

// 函數宣告
async function foo() {}
// 函數表示式
const foo = async function () {};
// 物件的方法
let obj = { async foo() {} };
obj.foo().then(...)
// Class 的方法
class Storage {
  constructor() {
    this.cachePromise = caches.open('avatars');
  }
  async getAvatar(name) {
    const cache = await this.cachePromise;
    return cache.match(`/avatars/${name}.jpg`);
  }
}
const storage = new Storage();
storage.getAvatar('jake').then(…);
// 箭頭函數
const foo = async () => {};

// 1.引入 fs 模組
const fs = require('fs')
// 2.讀取檔案
function index(){
    return new Promise((resolve,reject)=>{
        fs.readFile('./index.md',(err,data)=>{
            // 如果失敗
            if(err) reject(err)
            // 如果成功
            resolve(data)
        })
    })
}
function index1(){
    return new Promise((resolve,reject)=>{
        fs.readFile('./index1.md',(err,data)=>{
            // 如果失敗
            if(err) reject(err)
            // 如果成功
            resolve(data)
        })
    })
}
function index2(){
    return new Promise((resolve,reject)=>{
        fs.readFile('./index2.md',(err,data)=>{
            // 如果失敗
            if(err) reject(err)
            // 如果成功
            resolve(data)
        })
    })
}
// 3.宣告一個 async 函數
async function fn(){
    let i = await index()
    let i1 = await index1()
    let i2 = await index2()
    console.log(i.toString());
    console.log(i1.toString());
    console.log(i2.toString());
}
fn()

<script>
    // 傳送 AJAX請求，返回的結果是 Promise 物件
    function sendAjax(url){
        return new Promise((resolve,reject)=>{
            // 建立物件
            const x = new XMLHttpRequest()
            // 初始化
            x.open('GET',url)
            // 傳送
            x.send()
            // 事件繫結
            x.onreadystatechange = function(){
                if(x.readyState === 4){
                    if(x.status >= 200 && x.status < 300){
                        // 如果響應成功
                        resolve(x.response)
                        // 如果響應失敗
                        reject(x.status)
                    }
                }
            }
        })
    }
    // promise then 方法測試
    // const result = sendAjax("https://ai.baidu.com/").then(value=>{
    //     console.log(value);
    // },reason=>{})
    // async 與 await 測試
    async function fn(){
        // 傳送 AJAX 請求
        let result = await sendAjax("https://ai.baidu.com/")
        console.log(result);
    }
    fn()
</script>

<script>
    // Generator 函數
    function * person() {
        console.log('hello world');
        yield '第一分隔線' 
        console.log('hello world 1');
        yield '第二分隔線'
        console.log('hello world 2');
        yield '第三分隔線'
    }
    let iterator = person()
    // console.log(iterator); 列印的就是一個迭代器物件，裡面有一個 next() 方法，我們藉助next方法讓它執行
    iterator.next()
    iterator.next()
    iterator.next()
    // async函數
    const person1 = async function (){
        console.log('hello world');
        await '第一分隔線' 
        console.log('hello world 1');
        await '第二分隔線'
        console.log('hello world 2');
        await '第三分隔線'
    }
    person1()
</script>

<script>
    async function fn(args) {}
    // 等同於
    function fn(args) {
        // spawn函數就是自動執行器
        return spawn(function* () {});
    }
</script>

<script>
    // Generator 函數
    function Generator(a, b) {
        return spawn(function*() {
            let r = null;
            try {
                for(let k of b) {
                r = yield k(a);
                }
            } catch(e) {
                /* 忽略錯誤，繼續執行 */
            }
            return r;
        });
    }
    // async 函數
    async function async(a, b) {
        let r = null;
        try {
            for(let k of b) {
            r = await k(a);
            }
        } catch(e) {
         /* 忽略錯誤，繼續執行 */
        }
        return r;
    }
</script>