วิธีการดึงข้อมูล API ด้วยการใช้ axios

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

1
const axios = require('axios').default

1
import axios from 'axios'

1
const url = 'https://your-api-server'
2

3
axios
4
  .get(url)
5
  .then((response) => {
6
    // handle success
7
    console.log(response)
8
  })
9
  .catch((error) => {
10
    // handle errors
11
  })

1
const url = 'https://your-api-server/users?id=12345'
2

3
axios
4
  .get(url)
5
  .then((response) => {
6
    // handle success
7
    console.log(response)
8
  })
9
  .catch((error) => {
10
    // handle errors
11
  })

1
const url = 'https://your-api-server/users'
2

3
const options = {
4
  params: {
5
    id: 12345
6
  }
7
}
8

9
axios
10
  .get(url, options)
11
  .then((response) => {
12
    // handle success
13
    console.log(response)
14
  })
15
  .catch((error) => {
16
    // handle errors
17
  })

1
async function getUser() {
2
  try {
3
    const response = await axios.get('/your-api')
4
    console.log(response)
5
  } catch (error) {
6
    console.error(error)
7
  }
8
}

1
const payload = { title: 'Hello Axios' }
2
axios.post('/posts', payload)

1
const params = new URLSearchParams({ title: 'Hello Axios' })
2
axios.post('/posts', params)

1
const formData = new FormData()
2
formData.append('title', 'Hello Axios')
3

4
axios.post('/posts', formData)

1
const FormData = require('form-data')
2
const form = new FormData()
3

4
axios.post('/posts', form)

1
import axios from 'axios'
2

3
axios
4
  .post(
5
    '/posts',
6
    { title: 'Hello Axios' },
7
    {
8
      headers: {
9
        'Content-Type': 'multipart/form-data'
10
      }
11
    }
12
  )
13
  .then(({ data }) => console.log(data))

1
axios.get(url)
2

3
axios.post(url, payload)
4

5
axios.put(url, payload)
6

7
axios.patch(url, payload)
8

9
axios.delete(url)

1
// Set config defaults when creating the instance
2
const instance = axios.create({
3
  baseURL: 'https://api.example.com',
4
  headers: {
5
    'My-Custom-Header': 'custom-header'
6
  }
7
  timeout: 5000
8
});
9

10
instance.defaults.headers.common['Authorization'] = 'token';

1
const instance = axios.create()
2

3
instance.interceptors.request.use(
4
  (config) => {
5
    // get token from cookies / session / localStorage
6
    const token = getSessionToken()
7
    if (token) {
8
      config.headers['x-access-token'] = token
9
    }
10
    return config
11
  },
12
  (error) => {
13
    return Promise.reject(error)
14
  }
15
)

1
axios.get('/some-api').catch(function (error) {
2
  if (error.response) {
3
    // The request was made and the server responded with a status code
4
    // that falls out of the range of 2xx
5
    console.log(error.response.data)
6
    console.log(error.response.status)
7
    console.log(error.response.headers)
8
  } else if (error.request) {
9
    // The request was made but no response was received
10
    // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
11
    // http.ClientRequest in node.js
12
    console.log(error.request)
13
  } else {
14
    // Something happened in setting up the request that triggered an Error
15
    console.log('Error', error.message)
16
  }
17
  console.log(error.config)
18
})

1
axios.get('/some-api').catch(function (error) {
2
  console.log(error.toJSON())
3
})

1
const controller = new AbortController()
2

3
axios
4
  .get('/path/to/api', {
5
    signal: controller.signal
6
  })
7
  .then(function (response) {
8
    //...
9
  })
10
// cancel the request
11
controller.abort()

1
import axios from 'axios';
2

3
const instance = axios.create({
4
  withCredentials: true
5
});
6

7
instance.get('/todos');
8

9
# หรือ
10
axios.post('/login', { email, password }, { withCredentials: true });