Async Function and Await

Demo how to use Async Await

by Po-Jung Chen

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/superagent/3.5.2/superagent.js"></script>

JavaScript

const request = window.superagent
const endpoint = 'https://jsonplaceholder.typicode.com'

/**
 * Using Promise
 **/

function getArticleByPromise(articleNumber) {
  articleNumber++
  return new Promise((resolve, reject) => {
    request.get(endpoint + '/posts/' + articleNumber)
      .end((err, res) => {
        resolve(res)
        reject(err)
      })
  })
}
/*
getArticleByPromise(1)
.then((res) => {
	let parseResponse = JSON.parse(res.text)
  console.log(parseResponse)
  return getArticleByPromise(parseResponse.id)
})
.then((res) => {
	let parseResponse = JSON.parse(res.text)
  console.log(parseResponse)
  return getArticleByPromise(parseResponse.id)
})
.then((res) => {
	let parseResponse = JSON.parse(res.text)
  console.log(parseResponse)
  return getArticleByPromise(parseResponse.id)
})
.catch((err) => {
	console.log(err)
})
*/


/**
 * Get article by aysnc and await Function
 **/
async function getArticleByAsync() {
  console.log('start getArticleByAsync')
  let response
  try {
    console.log('before await')
    response = await getArticleByPromise(0)
    response = JSON.parse(response.text)
    console.log('after await')
  } catch (e) {
    console.log('error in getArticleByAsync', e)
  }
  // 這會在 await 中的 Promise resolved 後繼續執行
  console.log('response in getArticleByAsync', response)
}
getArticleByAsync()