នៅក្នុងភាសា ES6 នៅពេលខ្លះបញ្ជាមួយចំនួនត្រូវការពេលវេលាក្នុងការស្រង់យកទិន្នន័យឬធ្វើអ្វីផ្សេងៗទៀតក្នុងការជ្រើសរើសដ៏ចាំបាច់។ ក្នុងករណីនេះ បញ្ជាបន្ទាប់ពីនោះនឹងមិនរង់ចាំអោយបញ្ជាដែលត្រូវការពេលវេលាទាំងនោះធ្វើការអោយបានចប់សព្វគ្រប់ ទើបអាចចាប់ផ្តើមការងាររបស់វាឡើយ វានឹងចាប់ផ្តើមបំពេញការងាររបស់វាភ្លាមៗបន្ទាប់ពីបញ្ជាមុនវាត្រូវបានចាប់ផ្តើម។ ដំណើរការរបៀបនេះត្រូវហៅថាដំណើរការ asynchronous ។
ជួនកាល ដំណើរការ asynchronous បង្ករអោយមានការរាំងស្ទះដល់បញ្ជាជាបន្តបន្ទាប់ទាំងឡាយដែលត្រូវការទិន្នន័យពីបញ្ជាមុនៗយកទៅប្រើការ ពីព្រោះបញ្ជាបន្តបន្ទាប់ទាំងឡាយនឹងមិនរង់ចាំបញ្ជាមុនវា ធ្វើការងារអោយបានចប់សព្វគ្រប់ឡើយ។ ដើម្បីដោះស្រាយបញ្ហានេះ កញ្ចប់ SvelteKit បានផ្តល់លទ្ធភាពអោយយើងប្រើប្រាស់ផ្នែកនៃបញ្ជា await ក្នុងការរង់ចាំអោយបញ្ជាមុនៗទាំងឡាយអាចបញ្ចប់ការងាររបស់វាសិន ទើបផ្នែកនៃបញ្ជា await ចាប់ផ្តើមធ្វើការតាមក្រោយ។
// src/routes/utils.js
function randomNumber() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(Math.random() * 100)
}, 1000)
})
}
export async function getRandomNumber() {
const result = await randomNumber()
return result
}
<script>
import { getRandomNumber } from './utils.js';
let promise = getRandomNumber();
function handleClick() {
promise = getRandomNumber();
}
</script>
<button on:click={handleClick}>
generate random number
</button>
{#await promise}
<p>...waiting</p>
{:then number}
<p>The number is {number}</p>
{:catch error}
<p style="color: red">{error.message}</p>
{/await}
