🐈
Promiseオブジェクトを使った非同期処理(基本的な書き方①)
作成日:
2021/12/26
2
書き方
大きく分けて2種類。
・①「変数に入れない書き方」 ②「変数に入れる書き方」
・ さらに③「引数あり」の書き方がある。
※①②をベースに③がある感じ。
サンプル(resolveのみ)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//①「変数に入れない書き方」
function promiseTest1() {
return new Promise(function(resolve) {
resolve('通信成功')
})
}
console.log(promiseTest1())
//②「変数に格納する書き方」
const promiseTest2 = new Promise(function(resolve) {
resolve('通信成功2')
})
console.log(promiseTest2)
//③①の引数あり
function promiseTest3(input) {
return new Promise(function(resolve) {
resolve(`プロミス${input}です`)
})
}
console.log(promiseTest3('成功'))
//③②の引数あり
const promiseTest4 = function(input) {
return new Promise(function(resolve) {
resolve(`プロミス${input}です`)
})
}
console.log(promiseTest4('成功2'))
</script>
</body>
</html>
その他サンプル
『JavaScript本格入門』 P414
7.5.1 Promise オブジェクトの基本を押さえる
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function asyncProcess(value) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
if(value) {
resolve(`入力値: ${value}`);
} else {
reject('入力値は空です');
}
}, 1000)
})
}
asyncProcess('トクジロウ')
.then(function(response) {
console.log(response)
})
.catch(function(error) {
console.log(error)
})
.finally(function(response) {
console.log('finally')
})
</script>
</body>
</html>
事業会社にてコーダーをしています。制作は6年目。
インプットしたことをアウトプットしています。