데이터 통신을 위한, Fetch 함수와 Axios 라이브러리

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 모든 사용자 조회
fetch('https://api.heropy.dev/v0/users', {
  method: 'GET' // 혹은 생략 가능!
})
// 혹은
fetch('https://api.heropy.dev/v0/users')

// 새로운 사용자 생성
fetch('https://api.heropy.dev/v0/users', {
  method: 'POST',
  body: JSON.stringify({
    name: 'HEROPY',
    age: 85,
    emails: ['thesecon@gmail.com']
  })
})

// 사용자 정보 수정
fetch('https://api.heropy.dev/v0/users/ywTTX', {
  method: 'PUT',
  body: JSON.stringify({
    name: "HEROPY",
    emails: ['thesecon@gmail.com']
  })
})

// 사용자 삭제
fetch('https://api.heropy.dev/v0/users/ywTTX', {
    method: 'DELETE'
  })

1
2
3
4
5
6
7
8
9
10
fetch('https://api.heropy.dev/v0/users', {
  headers: {
    'Content-type': 'application/json',
    Apikey: 'KDnREmPe9B1',
    Username: 'ParkYoungWoong',
    Authorization: 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjlQS3I...',
    'X-Username': 'ParkYoungWoong',
    '...'
  }
})

1
2
3
4
5
6
7
8
9
10
11
fetch('https://api.heropy.dev/v0/users', {
  method: 'POST',
  headers: {
    'Content-type': 'application/json'
  },
  // 생성할 사용자 정보(데이터)
  body: JSON.stringify({
    name: 'HEROPY',
    age: 85
  })
})

1
2
3
fetch('https://api.heropy.dev/v0/users')
  .then(res => res.json())
  .then(data => console.log(data)) // { total: 7, users: User[] }

1
<script src="https://cdn.jsdelivr.net/npm/axios@1.6.2/dist/axios.min.js"></script>

1
$ npm i axios

1
2
3
4
import axios from 'axios'

axios.get('https://api.heropy.dev/v0/users')
  .then(res => console.log(res.data)) // { total: 7, users: User[] }

1
2
3
4
5
6
;(async () => {
  // const res = await fetch('https://api.heropy.dev/v0/users', { method: 'GET' })
  const res = await fetch('https://api.heropy.dev/v0/users')
  const data = await res.json()
  console.log(data)
})()

1
2
3
4
5
6
7
8
import axios from 'axios'

;(async () => {
  // const res = await axios({ url: 'https://api.heropy.dev/v0/users', method: 'GET' })
  // const res = await axios.get('https://api.heropy.dev/v0/users')
  const res = await axios('https://api.heropy.dev/v0/users')
  console.log(res.data)
})()

1
2
3
4
5
6
7
;(async () => {
  const res = await fetch('https://omdbapi.com/?apikey=7035c60c&s=avengers', {
    method: 'GET'
  })
  const data = await res.json()
  console.log(data)
})()

1
2
3
4
5
6
7
8
9
10
11
12
13
const queries = new URLSearchParams({
  apikey: '7035c60c',
  s: 'avengers'
})
console.log(queries.toString()) // 'apikey=7035c60c&s=avengers'

;(async () => {
  const res = await fetch(`https://omdbapi.com/?${queries}`, {
    method: 'GET'
  })
  const data = await res.json()
  console.log(data)
})()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
;(async () => {
  const res = await axios.get(`https://omdbapi.com/?apikey=7035c60c&s=avengers`)
  console.log(res.data)
})()

;(async () => {
  const res = await axios({
    url: `https://omdbapi.com/`,
    method: 'GET',
    params: {
      apikey: '7035c60c',
      s: 'avengers'
    }
  })
  console.log(res.data)
})()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
;(async () => {
  const res = await fetch('https://api.heropy.dev/v0/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      name: 'HEROPY',
      age: 85,
      isValid: true,
      emails: ['thesecon@gmail.com']
    })
  })
  const data = await res.json()
  console.log(data)
})()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
;(async () => {
  const res = await axios({
    url: 'https://api.heropy.dev/v0/users',
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    data: {
      name: 'HEROPY',
      age: 85,
      isValid: true,
      emails: ['thesecon@gmail.com']
    }
  })
  console.log(res.data)
})()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
;(async () => {
  const res = await axios({
    url: 'https://api.heropy.dev/v0/users/ywTTX',
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
    },
    data: {
      name: "HEROPY",
      emails: ['thesecon@gmail.com']
    }
  })
  console.log(res.data)
})()

1
2
3
4
5
6
7
;(async () => {
  const res = await fetch('https://api.heropy.dev/v0/users/ywTTX', {
    method: 'DELETE'
  })
  const data = await res.json()
  console.log(data)
})()

1
2
3
4
5
6
7
;(async () => {
  const res = await axios({
    url: 'https://api.heropy.dev/v0/users/ywTTX',
    method: 'DELETE'
  })
  console.log(res.data)
})()

1
2
3
4
5
6
const formData = new FormData()
// formData.append('이름', 데이터)
formData.append('id', userId)
formData.append('pw', userPw)
formData.append('file', file)
// ...

1
2
3
4
5
6
7
8
9
10
let file = null
document.querySelector('input[type="file"]')
  .addEventListener('change', event => {
    file = event.target.files[0]
  })
document.querySelector('button')
  .addEventListener('click', async () => {
    if (!file) return
    sendFile(file)
  })

1
2
3
4
5
6
7
8
9
10
async function sendFile(file) {
  const formData = new FormData()
  formData.append('file', file)

  const res = await fetch('URL주소', {
    method: '메소드',
    body: formData
  })
  return await res.json()
}

1
2
3
4
5
6
7
8
9
10
11
async function sendFile(file) {
  const formData = new FormData()
  formData.append('file', file)

  const res = await axios({
    url: 'URL주소',
    method: '메소드',
    data: formData
  })
  return res.data
}

1
2
3
4
5
6
<form>
  <input type="text" autocomplete="username" name="id" />
  <input type="password" autocomplete="current-password" name="pw" />
  <input type="file" name="file" />
  <button type="submit">전송</button>
</form>

1
2
3
4
5
6
7
8
9
10
11
12
document.querySelector('form')
  .addEventListener('submit', async event => {
    event.preventDefault() // 페이지가 새로고침되지 않도록 기본 동작 방지!

    const formData = new FormData(event.target) // `<form>` 요소 참조를 전달!
    const res = await axios({
      url: 'URL주소',
      method: '메소드',
      data: formData
    })
    return res.data
  })

1
2
3
4
5
6
7
8
formData.get('이름') // '이름'과 일치하는, 단일 데이터 확인!
formData.getAll('이름') // '이름'과 일치하는, 모든 데이터를 배열로 확인!
// ...

// 모든 데이터 확인!
for (const [key, value] of formData) {
  console.log(key, value)
}

1
2
3
4
5
6
7
8
function toBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = error => reject(error)
  })
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
async function sendFile(file) {
  const base64 = await toBase64(file)
  const res = await fetch('https://api.heropy.dev/v0/users/ywTTX', {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json' 
    },
    body: JSON.stringify({ 
      photo: {
        name: file.name,
        data: base64
      }
    })
  })
  return await res.json()
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
async function sendFile(file) {
  const base64 = await toBase64(file)
  const res = await axios({
    url: 'https://api.heropy.dev/v0/users/ywTTX',
    method: 'PUT',
    headers: { 
      'Content-Type': 'application/json' 
    },
    data: {
      photo: {
        name: file.name,
        data: base64
      }
    }
  })
  return res.data
}

1
2
3
4
5
6
7
8
9
;(async () => {
  try {
    const res = await fetch('https://omdbapi.com/?apikey=&s=avengers') // Error: 401 Unauthorized!
    const data = await res.json()
    console.log(data) // { Response: 'False', Error: 'No API key provided.' }
  } catch (err) {
    console.error('Error:', err)
  }
})()

1
2
3
4
5
6
7
8
9
10
11
12
;(async () => {
  try {
    const res = await fetch('https://omdbapi.com/?apikey=&s=avengers') // Error: 401 Unauthorized!
    const data = await res.json() // { Response: 'False', Error: 'No API key provided.' }
    if (data.Response === 'False') {
      return console.error(data.Error) // 'No API key provided.'
    }
    console.log(data)
  } catch (err) {
    console.error('Error:', err)
  }
})()

1
2
3
4
5
6
7
8
;(async () => {
  try {
    const res = await axios('https://omdbapi.com/?apikey=&s=avengers') // Error: 401 Unauthorized!
    console.log(res.data)
  } catch (err) {
    console.error('Error:', err) // { name: 'AxiosError', message: 'Request failed with status code 401', ... }
  }
})()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function fetchWithTimeout(url, options, timeout = 1000) {
  return Promise.race([
    fetch(url, options),
    new Promise((_, reject) =>
      setTimeout(() => reject(new Error('Request timed out!')), timeout)
    )
  ])
}

;(async () => {
  try {
    await fetchWithTimeout('https://api.heropy.dev/v0/delay?t=3000', {
      method: 'GET'
    }, 2000)
  } catch (err) {
    console.log('Error:', err)
  }
})()

1
2
3
4
5
6
7
8
9
10
11
;(async () => {
  try {
    await axios({
      url: 'https://api.heropy.dev/v0/delay?t=3000',
      method: 'GET',
      timeout: 2000 // 2초
    })
  } catch (err) {
    console.log('Error:', err)
  }
})()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const controller = new AbortController()

;(async () => {
  try {
    const res = await fetch('https://api.heropy.dev/v0/delay?t=3000', { 
      method: 'GET',
      signal: controller.signal
    })
    const data = await res.json()
    console.log(data)
  } catch (err) {
    if (err.name === 'AbortError') {
      console.log('요청이 취소되었습니다!')
    }
    console.log(err)
  }
})()

document.querySelector('h1')
  .addEventListener('click', () => {
    controller.abort() // 요청 취소!
  })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const controller = new AbortController()

;(async () => {
  try {
    const res = await axios({ 
      url: 'https://api.heropy.dev/v0/delay?t=3000',
      method: 'GET',
      signal: controller.signal
    })
    console.log(res.data)
  } catch (err) {
    if (err.name === 'AbortError') {
      console.log('요청이 취소되었습니다!')
    }
  }
})()

document.querySelector('button.cancel')
  .addEventListener('click', () => {
    controller.abort()
  })

1
2
3
4
5
6
7
8
9
10
;(async () => {
  const res = await fetch('https://api.heropy.dev/v0/users', { 
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name: 'HEROPY', age: 85 }),
    credentials: 'include'
  })
  const data = await res.json()
  console.log(data)
})()

1
2
3
4
5
6
7
8
9
10
;(async () => {
  const res = await axios({
    url: 'https://api.heropy.dev/v0/users',
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    data: { name: 'HEROPY', age: 85 },
    withCredentials: true
  })
  console.log(res.data)
})()

1
2
3
4
5
6
7
8
9
10
11
12
;(async () => {
  const res = await axios({
    url: 'https://api.heropy.dev/v0/users',
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjlQS3I...',
    },
    data: { name: 'HEROPY', age: 85 }
  })
  console.log(res.data)
})()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function api(method, endpoint, data) {
  const url = 'https://api.heropy.dev/v0' + endpoint
  const timeout = 2000
  const options = {
    method,
    headers: {
      Apikey: 'KDnREmPe9B1',
      Username: 'ParkYoungWoong'
    },
    body: data ? JSON.stringify(data) : null
  }
  return Promise.race([
    fetch(url, options),
    new Promise((_, reject) =>
      setTimeout(() => reject(new Error('Request timed out!')), timeout)
    )
  ])
}

api('GET', '/users')
api('POST', '/users', {
  name: 'HEROPY',
  age: 85
})
api('PUT', `/users/${userId}`, {
  age: 127
})
api('DELETE', `/users/${userId}`)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const api = axios.create({
  baseURL: 'https://api.heropy.dev/v0',
  timeout: 2000,
  headers: {
    Apikey: 'KDnREmPe9B1',
    Username: 'ParkYoungWoong'
  }
})

api.get('/users')
api.post('/users', {
  name: 'HEROPY',
  age: 85
})
api.put(`/users/${userId}`, {
  age: 127
})
api.delete(`/users/${userId}`)

1
$ npm i node-fetch

1
2
3
4
5
import fetch from 'node-fetch'

fetch(`https://api.heropy.dev/v0/users`)
  .then(res => res.json())
  .then(data => console.log(data)) // User[]

1
$ npm i axios

1
2
3
4
import axios from 'axios'

axios.get(`https://api.heropy.dev/v0/users`)
  .then(res => console.log(res.data)) // User[]