प्रौद्योगिकी साझेदारी

ES6 async function (10) इत्यस्य विस्तृतव्याख्या ।

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

अतुल्यकार्यं किम् ? एकस्मिन् शब्दे Generator फंक्शन् इत्यस्य syntactic sugar अस्ति ।

const gen = function* () {
  const f1 = yield readFile('/etc/fstab');
  const f2 = yield readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};

const asyncReadFile = async function () {
  const f1 = await readFile('/etc/fstab');
  const f2 = await readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

async फंक्शन् Generator फंक्शन् इत्यस्य ताराचिह्नं (*) async इत्यनेन प्रतिस्थापयितुं, yield इत्यस्य स्थाने await इत्यनेन प्रतिस्थापनं च, तत् एव ।

Generator फंक्शन् प्रति async फंक्शन् इत्यस्य सुधाराः निम्नलिखितचतुर्णां बिन्दुषु प्रतिबिम्बिताः भवन्ति ।

(1) अन्तर्निर्मित-अभिचालक।
Generator फंक्शन् इत्यस्य निष्पादनं executor इत्यस्य उपरि अवश्यमेव अवलम्बते, अतः co module अस्ति, async function अपि स्वस्य executor इत्यनेन सह आगच्छति । अन्येषु शब्देषु, async functions इत्यस्य निष्पादनं साधारणफंक्शन् इत्यस्य समानं भवति, केवलं एकपङ्क्तिः भवति ।

co module: co module इति प्रसिद्धेन प्रोग्रामर TJ Holowaychuk इत्यनेन जून २०१३ तमे वर्षे विमोचितं लघुसाधनम् अस्ति, यस्य उपयोगः Generator कार्याणां स्वचालितनिष्पादनार्थं भवति ।
co मॉड्यूल् भवन्तं Generator फंक्शन् इत्यस्य executor इत्यस्य लेखनात् रक्षति ।

// Generator 函数
var gen = function* () {
  var f1 = yield readFile('/etc/fstab');
  var f2 = yield readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};

//co模块使用
var co = require('co');
co(gen); //co 函数返回一个 Promise 对象
co(gen).then(function (){
  console.log('Generator 函数执行完成');
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

(2) उत्तमः शब्दार्थः।
Async and await इत्येतयोः अर्थशास्त्रं ताराचिह्नस्य उपजस्य च अपेक्षया स्पष्टतरं भवति । async इत्यस्य अर्थः अस्ति यत् फंक्शन् मध्ये अतुल्यकालिकं क्रिया अस्ति, await इत्यस्य अर्थः अस्ति यत् निम्नलिखितव्यञ्जनस्य परिणामस्य प्रतीक्षा आवश्यकी अस्ति ।
(3) व्यापकप्रयोज्यता।
co module कन्वेन्शनस्य अनुसारं yield आदेशस्य अनुसरणं केवलं Thunk फंक्शन् अथवा Promise ऑब्जेक्ट् इत्यनेन कर्तुं शक्यते, यदा तु async फंक्शन् इत्यस्य await आदेशस्य अनुसरणं Promise ऑब्जेक्ट् इत्यनेन तथा च प्रिमिटिव टाइप् वैल्यू (numeric value, string तथा Boolean इत्यनेन अनुसरणं कर्तुं शक्यते मूल्यं, परन्तु स्वयमेव तत्क्षणं समाधानं प्राप्तं Promise ऑब्जेक्ट् मध्ये परिवर्तितं भविष्यति) ।
(4) रिटर्न् वैल्यू Promise अस्ति।
async फंक्शन् इत्यस्य return value Promise object अस्ति, यत् Generator function इत्यस्य return value इत्यस्य Iterator object इत्यस्य अपेक्षया बहु अधिकं सुलभम् अस्ति । अग्रिमक्रिया निर्दिष्टुं भवान् then मेथड् इत्यस्य उपयोगं कर्तुं शक्नोति ।

अपि च, async फंक्शन् बहुविध-अतुल्यकालिक-क्रियाः इति गणयितुं शक्यते, Promise-वस्तु-मध्ये संकुलं कृत्वा, await-आदेशः च आन्तरिक-then-आदेशस्य वाक्य-शर्करा भवति

1. मूलभूतं async कार्यम्

// 定义一个异步函数
async function fetchData() {
    return 'Data fetched';
}

// 调用异步函数
fetchData().then(data => {
    console.log(data); // 输出: Data fetched
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

2. Promise इत्यस्य प्रतीक्षां कर्तुं await इत्यस्य उपयोगं कुर्वन्तु

// 模拟一个异步请求函数
function getUserData() {
    return new Promise(resolve => {
        setTimeout(() => resolve({ name: 'Alice' }), 1000);
    });
}

// 异步函数使用 await 等待 Promise
async function printUserData() {
    try {
        const userData = await getUserData();
        console.log(userData); // 输出: { name: 'Alice' }
    } catch (error) {
        console.error(error);
    }
}

printUserData();
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

3. त्रुटिनियन्त्रणम्

// 异步函数中的错误处理
async function riskyFunction() {
    try {
        const result = await Promise.reject('An error occurred');
    } catch (error) {
        console.error(error); // 输出: An error occurred
    }
}

riskyFunction();
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

4. श्रृङ्खलाबद्धाः अतुल्यकार्यम्

async function asyncOperation() {
    return 'Operation completed';
}

async function chainAsyncFunctions() {
    try {
        const result1 = await asyncOperation();
        const result2 = await asyncOperation();
        console.log(result1, result2); // 输出: Operation completed Operation completed
    } catch (error) {
        console.error(error);
    }
}

chainAsyncFunctions();
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

5. इवेण्ट् हैंडलिंग फंक्शन् इत्यस्य रूपेण async फंक्शन्

// 假设有一个按钮元素
const button = document.querySelector('#myButton');

// 为按钮添加点击事件处理函数
button.addEventListener('click', async event => {
    try {
        const data = await fetchData();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

6. async function तथा Promise.all

// 异步函数返回多个 Promise
async function fetchUsers() {
    return ["User1", "User2", "User3"];
}

async function fetchPosts() {
    return ["Post1", "Post2", "Post3"];
}

// 使用 Promise.all 并行处理多个异步操作
async function fetchAllData() {
    try {
        const [users, posts] = await Promise.all([fetchUsers(), fetchPosts()]);
        console.log(users, posts); // 输出: [ 'User1', 'User2', 'User3' ] [ 'Post1', 'Post2', 'Post3' ]
    } catch (error) {
        console.error(error);
    }
}

fetchAllData();
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20