この記事は以下の書籍を参考にして執筆しました。
#非同期処置
javascriptは最初から非同期言語
プロミスは未来の値を表すイブジェクト
プロミスの値がすでに取得されているなら、すぐに提供され、
まだなら値が取得できるまで待機できる。
これがコールバックなら、値がすでに取得されている場合、
もたもたしているとコールバックが呼び出されないことがある。
#プロミス
プロミスは最終的なオブジェクトのこと
この最終的な(未来の)値にアクセスするにはプロミスでthenメソッドを呼び出してコールバック関数を渡す。
##プロミスを使ってみる
fetch('https://qiita.com/')
//アロー関数はリクエストが完了した後responseを使って呼び出される。
.then(response => {
//処理
})
プロミスが解決されたら、レスポンスオブジェクトからデータを取得する。
コールバックよりプロミスを使用したほうがコードが完結になる例を見てみる。
function getOrgs(usename) {
return axios.get('https://example.com')
}
getOrgs('jisaacks').then(resp => {
const orgs = resp.data
//処理
})
プロミスを返す関数を作成し、従来のコールバックバージョンも書いてみる
function getOrgs(usename, callback) {
return axios.get('https://example.com',callback)
}
getOrgs('jisaacks', resp => {
const orgs = resp.data
//処理
})
コールバックバージョンだとgetOrgs関数がより複雑になっている。
というもの、axiosライブラリに渡すコールバック関数を受け取る必要があるため。
##エラー処理
プロミスのthneメソッドの第2に引数にはエラーが発生したときに呼び出されるコールバックを渡せる。
function success(resp) {
//成功時のレスポンスの処理
}
function error(err) {
//エラー処理
}
const url = 'http://exmample.com'
axios.get(url).then(success, error)
#高度なプロミス
##プ口ミスを作成する
プロミスを作成するには新しいPrimiseオブジェクトをインスタンス化する。
その際にはnew Promise(fn)のように引数として関数を指定する。
プロミスに渡される関数にはパラメータがつある
- プロミスを解決するための関数
- プロミスを拒否するための関数
const later = new Promice((resolve, reject) => {
//何らかの非同期処理
resolve('alligator')
})
later.then(response => {
console.log(response) //alligator
})
画像の読み込みをプロミスに変えたい場合、従来はこのようになるかもしれない
cosnt img = new Image()
img.onload = () => //画像が読み込まれたときの処理
img.onerror = () => //画像の読み込みが失敗したときの処理
img.srv = 'http://example.com'
プロミスを使うとこうなる
function fetchImage(src) {
return new Promise((res, rej) => {
const img = new Image()
img.onload = res
img.onerror = rej
img.src = src
})
}
fetchImage('http:example.com').then(
() => console.log('image loaded'),
() => console.log('image failed')
)
###プロミス解決の前に5秒待機したい場合は
setTimeoutをプロミスでラッピングする
function wait(milliseconds) {
return new Promise((resolve) => {
setTimeout(resolve, milliseconds)
})
}
wait(5000).then(() => {
//5行後の処理
})
##入れ子のプロミス
fetchでは複数のプロミスを使用する必要がある。
fetch('http://example.com').then(resp => {
resp.json().then(results => {
//resultsを使って処理
})
})
プロミスではthenメソッドを呼び出すたびに、
新しいプロミスが返される。
これによりプロミスチェーンの作成ができる。
fetch('http://example.com')
.then(resp => resp.json())
.then(resultd => {
//resultを使った処理
})
プロミスでthenメソッドを呼び出すときには
引数として関数を渡す
この関数から返されるものは何であっても
このチェーンの次のthenメソッドの値になる。
Promise.resolve(1)
.then(number => number + 1) //1+1=2
.then(number => number + 1) //2+1=3
.then(number => number + 1) //3+1=4
.then(number => {
console.log(number) //4
})
###アロー関数の注意
チェーンする際に以下はundefinedになる
Promise.resolve(1)
.then(number => {
number + 1
console.log(number)
})
.then(number => {
number + 1
console.log(number)//undefined
})
.then(number => {
number + 1
console.log(number)//undefined
})
.then(number => {
console.log(number) //undefined
})
アロー関数を使用する際にブロックを使うなら最後にretunして次のthenメソッドに値を渡す必要がある。
Promise.resolve(1)
.then(number => {
return number + 1
console.log(number)//1+1=2
})
.then(number => {
return number + 1
console.log(number)//2+1=3
})
.then(number => {
return number + 1
console.log(number)//3+1=4
})
.then(number => {
console.log(number) //4
})
#参考文献