집 > 기사 > 웹 프론트엔드 > JavaScript의 비동기 함수에 대한 심층 분석

JavaScript의 비동기 함수에 대한 심층 분석

青灯夜游앞으로: 2022-11-03 20:36:441543검색

async function

async 함수의 반환값은 Promise 객체이고, Promise 객체의 결과는 비동기 함수 실행의 반환값에 따라 결정됩니다. 비동기 함수는 비동기 작업을 더욱 편리하게 만들어줍니다. 간단히 말해서 이는 Generator의 구문 설탕입니다.

비동기 함수를 정의합니다. 함수의 내부 반환 결과가 Promise 객체가 아니더라도 함수 호출의 최종 반환 결과는 여전히 Promise 객체라는 것이 특징입니다. 다음: 반환된 결과가 Promise 객체가 아닌 경우 이 경우:

<script>
    async function fn(){
        // 返回的结果是字符串
        // return &#39;123&#39;
        // // 返回的结果是undefined
        // return;
        // 返回的结果是抛出一个异常
        throw new &#39;error&#39;
    }
    const result = fn()
    console.log(result);
</script>

반환된 결과가 Promise 객체인 경우 다음과 같이 then 메소드를 정상적으로 사용할 수 있습니다.

<script>
    async function fn(){
        return new Promise((resolve,reject)=>{
            // resolve(&#39;成功的数据&#39;)
            reject(&#39;失败的数据&#39;)
        })
    }
    const result = fn()
    // 调用 then 方法
    result.then((value)=>{
        console.log(value);
    },(reason)=>{
        console.log(reason); // 打印失败的数据
    })
</script>

await 표현식

위의 async 소개를 통해 그 기능이 좀 아쉽다는 생각이 듭니다. 맛도 없고 실제로는 아니지만 async를 Wait와 함께 사용해야 Syntactic Sugar의 효과를 얻을 수 있습니다.

await 특성: await는 비동기 함수로 작성되어야 합니다.

await 오른쪽의 표현식은 일반적으로 Promise 객체입니다.

await는 Promise 성공 값을 반환합니다.

await의 Promise가 실패했습니다. 예외가 발생하며 try...catch

직접 말하면: wait는 then 메서드의 첫 번째 콜백 함수와 동일하며 성공한 값만 반환하고 try를 통해 캡처하고 처리해야 합니다. 실패한 값의 경우 ..catch하여 캡처합니다. 비동기 함수 내부에 오류가 발생하면 반환된 Promise 객체가 거부됩니다. 던져진 오류 객체는 catch 메소드 콜백 함수에 의해 수신됩니다.

<script>
    const p = new Promise((resolve,reject)=>{
        // resolve(&#39;用户数据&#39;)
        reject(&#39;用户加载数据失败了&#39;)
    })
    async function fn(){
        // 为防止promise是失败的状态，加上try...catch进行异常捕获
        try {
            // await 返回的结果就是 promise 返回成功的值
            let result = await p
            console.log(result);
        } catch (error) {
            console.log(error);//因为是失败的状态，所以打印：用户加载数据失败了
        }
    }
    fn()
</script>

Summary:

(1) 결과적으로 Wait 명령 뒤의 Promise 객체가 거부될 수 있으므로, try...catch 코드에 wait 명령을 넣는 것이 가장 좋습니다. 차단하다.

(2)여러 wait 명령 뒤에 비동기 작업이 있는 경우 후속 관계가 없으면 동시에 트리거되도록 하는 것이 가장 좋습니다. 예: wait Promise.all([a(), b()]), 여기에 간략한 언급이 있습니다

(3)await 명령은 일반 함수에서 사용되는 경우 비동기 함수에서만 사용할 수 있습니다. , 오류가 보고됩니다.

(4)(비동기의 작동 원리 이해하기) 비동기 함수는 실행 중인 스택을 유지할 수 있습니다. 비동기 작업이 일반 함수 내에서 실행될 때 비동기 작업이 끝나면 일반 함수는 오래 전에 실행이 완료되고 비동기 작업 컨텍스트 환경이 사라졌습니다. 비동기 작업이 오류를 보고하면 비동기 함수 내부의 비동기 작업이 실행되는 동안 오류 스택에 일반 함수가 포함되지 않으므로 비동기 함수가 일시 중지됩니다. 비동기 함수 내부의 비동기 작업이 실행되고 오류가 보고되면 오류 스택에 비동기 함수가 포함됩니다.

async 사용 형태

// 函数声明 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 () => {};

async는 파일을 읽습니다

앞서 설명한 파일 내용을 읽겠다는 약속과 마찬가지로 async를 사용하여 파일을 읽을 수도 있습니다. 코드는 다음과 같습니다.

// 1.引入 fs 模块
const fs = require(&#39;fs&#39;)
 
// 2.读取文件
function index(){
    return new Promise((resolve,reject)=>{
        fs.readFile(&#39;./index.md&#39;,(err,data)=>{
            // 如果失败
            if(err) reject(err)
            // 如果成功
            resolve(data)
        })
    })
}
function index1(){
    return new Promise((resolve,reject)=>{
        fs.readFile(&#39;./index1.md&#39;,(err,data)=>{
            // 如果失败
            if(err) reject(err)
            // 如果成功
            resolve(data)
        })
    })
}
function index2(){
    return new Promise((resolve,reject)=>{
        fs.readFile(&#39;./index2.md&#39;,(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()

async가 AJAX 요청을 보냅니다

앞의

ajax 요청 보내기 약속

에 대한 설명과 유사하게 async를 사용하여 ajax 요청을 보낼 수도 있습니다. 코드는 다음과 같습니다.

<script>
    // 发送 AJAX请求，返回的结果是 Promise 对象
    function sendAjax(url){
        return new Promise((resolve,reject)=>{
            // 创建对象
            const x = new XMLHttpRequest()
 
            // 初始化
            x.open(&#39;GET&#39;,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>

Generator와 비교

우리는 async와 wait의 관계가 Generator와 Yield의 관계와 매우 유사하다는 것을 알았습니다. Generator에 익숙하지 않은 친구들은 저의 이전 글인

Generator Description

을 읽어보시면 다음과 같습니다: async function 생성기 함수입니다. 별표(*)를 async로 바꾸고, Yield를 Wait로 바꿉니다. 코드 비교는 다음과 같습니다.

<script>
    // Generator 函数
    function * person() {
        console.log(&#39;hello world&#39;);
        yield &#39;第一分隔线&#39; 
    
        console.log(&#39;hello world 1&#39;);
        yield &#39;第二分隔线&#39;
    
        console.log(&#39;hello world 2&#39;);
        yield &#39;第三分隔线&#39;
    }
    let iterator = person()
    // console.log(iterator); 打印的就是一个迭代器对象，里面有一个 next() 方法，我们借助next方法让它运行
    iterator.next()
    iterator.next()
    iterator.next()
 
    // async函数
    const person1 = async function (){
        console.log(&#39;hello world&#39;);
        await &#39;第一分隔线&#39; 
    
        console.log(&#39;hello world 1&#39;);
        await &#39;第二分隔线&#39;
    
        console.log(&#39;hello world 2&#39;);
        await &#39;第三分隔线&#39;
    }
    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>

所以 async 函数的实现符合语义也很简洁，不用写Generator的自动执行器，改在语言底层提供，因此代码量少。

从上文代码我们可以总结以下几点：

（1）Generator函数执行需要借助执行器，而async函数自带执行器，即async不需要像生成器一样需要借助 next 方法才能执行，而是会自动执行。

（2）相比于生成器函数，我们可以看到 async 函数的语义更加清晰

（3）上面就说了，async函数可以接受Promise或者其他原始类型，而生成器函数yield命令后面只能是Promise对象或者Thunk函数。

（4）async函数返回值只能是Promise对象，而生成器函数返回值是 Iterator 对象

【推荐学习：javascript高级教程】

위 내용은 JavaScript의 비동기 함수에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript ajax try catch 回调函数栈堆对象 promise 异步

성명：

이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：RPC란 무엇입니까? 노드에서 RPC 통신을 구현하는 방법에 대해 이야기해 보겠습니다.다음 기사：RPC란 무엇입니까? 노드에서 RPC 통신을 구현하는 방법에 대해 이야기해 보겠습니다.