JavaScript의 대기/비동기 기능 및 사용법에 대한 자세한 설명

JavaScript에서 Wait/async의 역할과 사용법

공유:

await/async는 ES7의 가장 중요한 기능 중 하나입니다. JS를 위한 최고의 비동기 솔루션입니다. ES2016에는 포함되지 않았지만 곧 출시될 예정이며 현재 ES-NextStage4 단계에 있습니다.

바로 예를 들어보겠습니다. 예를 들어 제품 데이터 => 사용자 데이터 => 댓글 데이터

오래된 친구 Ajax

전통적인 글쓰기, 설명할 필요가 없습니다

// 获取产品数据
ajax('products.json', (products) => {
    console.log('AJAX/products >>>', JSON.parse(products));
    // 获取用户数据
    ajax('users.json', (users) => {
        console.log('AJAX/users >>>', JSON.parse(users));
        // 获取评论数据
        ajax('products.json', (comments) => {
            console.log('AJAX/comments >>>', JSON.parse(comments));
        });
    });
});

새 친구가 아닙니다. Promise

Promise 오랫동안 언급되어 왔으며 ES6의 일부입니다. Promise는 콜백 지옥으로 인한 파멸의 피라미드를 제거하여 코드를 더 명확하게 만들 수 있습니다.

// Promise
// 封装 Ajax，返回一个 Promise
function requestP(url) {
    return new Promise(function(resolve, reject) {
        ajax(url, (response) => {
            resolve(JSON.parse(response));
        });
    });
}
// 获取产品数据
requestP('products.json').then(function(products){
    console.log('Promises/products >>>', products);
});
// 获取用户数据
requestP('users.json').then(function(users){
    console.log('Promises/users >>>', users);
});
// 获取评论数据
requestP('comments.json').then(function(comments){
    console.log('Promises/comments >>>', comments);
});

물론 Promise.all을 사용하면 더 간결해질 수 있습니다

Promise.all([
    requestP('products.json'),
    requestP('users.json'),
    requestP('comments.json')
])
.then(function(data) {
    console.log('Parallel promises >>>', data);
});

강력한 새 친구 제너레이터

제너레이터도 ES6의 새로운 기능으로 코드를 일시 중지/실행할 수 있습니다. Yield는 일시 중지를 의미하고 iterator.next는 다음 단계를 실행하는 것을 의미합니다. Generator를 이해하지 못해도 무시하고 Wait/async를 직접 배울 수 있습니다.

// Generators
function request(url) {
    ajax(url, (response) => {
        iterator.next(JSON.parse(response));
    });
}
function *main() {
    // 获取产品数据
    let data = yield request('products.json');
    // 获取用户数据
    let users = yield request('users.json');
    // 获取评论数据
    let products = yield request('comments.json');
    console.log('Generator/products >>>', products);
    console.log('Generator/users >>>', users);
    console.log('Generator/comments >>>', comments);
}
var iterator = main();
iterator.next();
碉堡的朋友 await/async
与 Promise 结合使用
// 封装 Ajax，返回一个 Promise
function requestP(url) {
    return new Promise(function(resolve, reject) {
        ajax(url, (response) => {
            resolve(JSON.parse(response));
        });
    });
}
(async () => {
    // 获取产品数据
    let data = await requestP('products.json');
     // 获取用户数据
    let users = await requestP('users.json');
     // 获取评论数据
    let products = await requestP('comments.json');
    console.log('ES7 Async/products >>>', products);
    console.log('ES7 Async/users >>>', users);
    console.log('ES7 Async/comments >>>', comments);
}());

Fetch API와 함께 사용:

(async () => {
// Async/await using the fetch API
    try {
         // 获取产品数据
        let products = await fetch('products.json');
        // Parsing products
        let parsedProducts = await products.json();
        // 获取用户数据
        let users = await fetch('users.json');
        // Parsing users
        let parsedUsers = await users.json();
        // 获取评论数据
        let comments = await fetch('comments.json');
        // Parsing comments
        let parsedComments = await comments.json();
        console.log('ES7 Async+fetch/products >>>', parsedProducts);
        console.log('ES7 Async+fetch/users >>>', parsedUsers);
        console.log('ES7 Async+fetch/comments >>>', parsedComments);
    } catch (error) {
        console.log(error);
    }
}());

배열 순서로 실행

(async () => {
    let parallelData = await* [
        requestP('products.json'),
        requestP('users.json'),
        requestP('comments.json')
    ];
    console.log('Async parallel >>>', parallelData);
}());

다시 Fetch

(async () => {
    let parallelDataFetch = await* [
        (await fetch('products.json')).json(),
        (await fetch('users.json')).json(),
        (await fetch('comments.json')).json()
    ];
    console.log('Async parallel+fetch >>>', parallelDataFetch);
}());

와 결합하여 Async를 사용하여 동기적 사고로 비동기 코드를 해결하는 것이 매우 멋지고 상쾌합니다!

추천 튜토리얼: "js 기본 튜토리얼"

위 내용은 JavaScript의 대기/비동기 기능 및 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!