Promise

JavaScriptはコードをその場で止めておくことができないため、例えばデータを取得してから処理を実行したいときもデータの取得が完了する前に次のコードが実行されてしまいます。
そこでPromiseを使います。
Promiseを使うことで処理の完了を待ってから実行することができます。

promiseの構文

const promise = new Promise((resolve,reject)=>{  
});

Promiseには状態があり、以下の3つのようになります

• unresolved 処理待ち
• resolved 処理成功
• rejected　処理失敗

処理が成功した場合はresolveが呼ばれてresolved状態になります
失敗した場合はrejectが呼ばれてrejected状態になります
resolve状態になったときthenが呼ばれます
rejected状態になったときcatchが呼ばれます

resolve→resolved→then
reject→rejected→catch

const promise = new Promise((resolve, reject) => { 
  resolve();
});

promise.then(()=>{  
  console.log('処理完了')
});

結果
resolveした場合thenが呼ばれるので処理完了と表示

処理完了

またresolveしたときthenは全て実行されます

promise  
  .then(()=>{  
  console.log('処理完了')  
})  
  .then(()=> {    
  console.log('ここも実行')  
});

結果

処理完了ここも実行

省略してシンプルに書く

promise  
  .then(()=> console.log('処理完了'))  
  .then(()=> console.log('ここも実行'));

rejectした時はcatchが呼ばれるので処理失敗と表示されます

const promise = new Promise((resolve, reject) => {  
  reject();
});

promise 
  .then(()=> console.log('処理完了'))  
//ここが呼ばれる  .
catch(()=> console.log('処理失敗'));

結果

処理失敗

時間がかかる処理でpromiseしてみます
最初は何も表示されず3秒後にresolveが呼ばれconsole表示されます
rejectの場合も同様です

const promise = new Promise((resolve, reject) => { 
  //時間かかる処理  
  setTimeout(()=> {    
    resolve();  
  },3000)
});

promise  
  .then(()=> console.log('処理完了'))  
  .catch(()=> console.log('処理失敗'));

結果(3秒後に表示される)

処理完了

axiosでAPIリクエスト

APIリクエストしてみる

axios  
  .get('https://jsonplaceholder.typicode.com/posts/')  
  .then(response => console.log(response.data))  
  .catch(() => console.log('失敗'));

データの取得が終わってからconsole.logが実行されるため、consoleにAPIのデータが表示されます