TypeScriptの非同期処理を解説

// 非同期処理を行う関数
function fetchData() {
  return new Promise((resolve, reject) => {
    // ここで非同期処理を行う
    // 処理が成功したら resolve を呼び出し、失敗したら reject を呼び出す
  })
}

// fetchDataを呼び出す
fetchData()
  .then(data => {
    // 非同期処理が成功した場合に実行される
    console.log(data)
  })
  .catch(error => {
    // 非同期操作が失敗した場合に実行される
    console.error("エラー検知:", error)
  })

function fetchData(url) {
    return new Promise((resolve, reject) => {
        fetch(url)
            .then(response => {
                if (!response.ok) {
                    // サーバからエラーレスポンスが返された場合
                    // (404などの200番台以外のエラーコード)
                    throw new Error('Network response was not ok')
                }
                // レスポンスをJSONとしてパース(解析)する
                return response.json()
            })
            .then(data => {
                // データの取得に成功したので、resolveを呼び出す
                resolve(data)
            })
            .catch(error => {
                // エラーが発生したので、rejectを呼び出す
                reject(error)
            })
    });
}

// 仮のURLを作成
const url = 'https://example.com/sample-data'
fetchData(url)
    .then(data => console.log(data))  // 成功時の処理
    .catch(error => console.error(error));  // 失敗時の処理

fetch(url)

url = new URL('https://example.com/sample-data') // 新たにURLオブジェクトを生成
url.searchParams.append('param1', 'value1')
url.searchParams.append('param2', 'value2')

console.log(url.toString()) // https://example.com/sample-data?param1=value1＆param2=value2

// fetchでレスポンスの受け取り
fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))

const url = 'https://example.com/data'
const data = {
  param1: 'value1',
  param2: 'value2'
};

fetch(url, {
  method: 'POST', // HTTPメソッドをPOSTに指定
  headers: {
    'Content-Type': 'application/json', // コンテンツタイプをJSONに指定
  },
  body: JSON.stringify(data), // ここでデータをJSON形式の文字列に変換
})
.then(response => response.json()) // レスポンスを解析し、次のthenで受け取れる形に変換
.then(data => console.log(data)) // 成功した場合に、dataにレスポンスが入る
.catch(error => console.error(error)) // 失敗した場合に、エラーハンドリングをする

async function asyncFunc() {
  return "Hello, World!"
}

asyncFunc().then(message => console.log(message))
// Hello, World!

async function asyncFunc() {
  const response = await fetch("https://example.com/sample-data")
  const data = await response.json()
  return data
}

asyncFunc().then(data => console.log(data))

async function asyncFunc() {
  try {
    const response = await fetch("https://example.com/data");
    const data = await response.json()
    // 成功した時にdataを返却
    return data
  } catch (error) {
    console.error(error)
    // 拒否された時にnullを返却
    return null
  }
}

asyncFunc().then(data => {
  if (data !== null) {
    console.log(data)
  }
})

async function fetchData(): Promise<string> {
  let response = await fetch('https://example.com/sample-data')
  let data = await response.text()
  return data
}

fetchData().then(console.log)

async function fetchData(): Promise<string> {
  try {
    let response = await fetch('https://example.com/sample-data')
    let data = await response.text()
    return data
  } catch (error: any) {
    console.error(error)
    throw error  // エラーを再スロー
  }
}