āļŠāļēāļĢāļāļēāļāļāļąāļāđāļāļĩāļĒāļ
āđāļāļāļąāļāļāļļāļāļąāļ āđāļĢāļēāļāđāļēāļāļ°āļāļļāđāļāļŦāļđāļāļąāļ āļāļģāļ§āđāļē API (Application Program Interface) āđāļāđāļāđāļŦāļĄāļ·āļāļāļāļąāļ§āļāļĨāļēāļāļāļĩāđāđāļŦāđāđāļāļĢāđāļāļĢāļĄāļŠāļāļāļāļąāļ§āļŠāļ·āđāļāļŠāļēāļĢāļāļąāļāđāļāđ (āđāļāļĢāđāļāļĢāļĄāđāļāļāļĩāđāļāļĩāđāļŠāļēāļĄāļēāļĢāļāļŦāļĄāļēāļĒāļāļķāļ Client āļāļļāļĒāļāļąāļ Server āļŦāļĢāļ·āļ Server āļāļļāļĒāļāļąāļ Server āļāļ·āđāļ āđ āļāđāđāļāđāđāļŦāļĄāļ·āļāļāļāļąāļ )
āđāļāļĒāļĄāļĩāļāļēāļĢāļāļģāļŦāļāļāļāļēāļĢāđāļāđāļāļēāļāđāļ§āđāļāđāļāļāđāļĨāđāļ§ āļāđāļēāļŦāļēāļāļāļ°āđāļŦāđāđāļāļĨāđāđāļĢāļēāļĄāļēāļāļāļķāđāļ āđāļĢāļēāļŠāļēāļĄāļēāļĢāļāđāļāđāļāļāļāļāđāđāļ§āļĢāđāļāļĩāđāļāļĨāđāļāļĒāļāļĢāļĩāļāļēāļāļāļīāļāđāļāļāļĢāđāđāļāđāļāđāļāđāļ§āđāļāđāļĢāļēāđāļāđ āđāļāđāļ Spotify API, Weather API āļŦāļĢāļ·āļāđāļāđāļāļēāļĢāļāļģāļāđāļāļĄāļđāļĨāļĄāļēāđāļŠāđāđāļāđāļ§āđāļāđāļĢāļēāđāļāļāđāļāđāļāļāđāļ āđāļāļĒāđāļĢāļēāļŠāļēāļĄāļēāļĢāļāđāļāđ Axios āļāļķāđāļāđāļāđāļ Library āļāļāļ JavaScript āđāļĨāļ° TypeScript āļĄāļēāļāđāļ§āļĒāļāļąāļāļāļēāļĢāļāļąāļ request API āđāļāļĒāļāļĢāļ āļāļāļāļāļēāļāļāļąāđāļ āđāļĢāļēāļĒāļąāļāļĄāļēāļāļđ āļāļēāļĢāđāļāđ Axios āļĢāđāļ§āļĄāļāļąāļ React āđāļāļāļāļĢāđāļēāļ§ āđ āđāļāļāļēāļĢāļāļģāđāļāđāļŠāļāļāđāļāļŦāļāđāļēāđāļ§āđāļāļāļĩāļāļāđāļ§āļĒ āļāđāļēāļāļĢāđāļāļĄāđāļĨāđāļ§āļĨāļļāļĒ ð
āļāļāļāļ§āļēāļĄāļāļĩāđāļāļĩāļāļīāļĄāļāđ āđāļĨāļ° āđāļāļĒāđāļāļĢāđāđāļĄāļ·āđāļ 3 āļāļĪāļĻāļāļīāļāļēāļĒāļ 2023
āđāļĢāļēāļĄāļēāđāļĢāļīāđāļĄāļāļąāļāļāļĩāđāļ§āđāļē Axios āđāļāļĩāđāļĒāļĄāļąāļ āļāļ·āļāļāļ°āđāļĢāļāļąāļāļāđāļē ???
Axios āļāļ·āļ library āļāļąāļ§āļŦāļāļķāđāļāļāļāļ JavaScript, TypeScript āļāļĩāđāđāļāđāđāļāļāļēāļĢāļāļąāļāļāļēāļĢāļāļąāļ API āļāđāļ§āļĒāļ§āļīāļāļĩ HTTP methods āđāļāļāļĩāđāļāļĩāđ āļāļ°āđāļāđāļāļāļēāļĢāļāļąāļāļāļēāļĢ āļāļēāļāļāļąāđāļ request āļŦāļĢāļ·āļāļāđāļāļ·āļ HTTP Request Methods āļāļąāđāļāđāļāļ āļāļķāđāļāļāļ°āļĄāļĩāļāļĒāļđāđ 4 āļ§āļīāļāļĩ āļāļĩāđāđāļāđāļāļąāļāļāđāļāļĒāļāđ āļāļ·āļ Get, Post, Put āđāļĨāļ° Delete āđāļĢāļēāļĄāļēāļāļđāļāļąāļāļāļĩāļāļ§āđāļē āđāļāđāļĨāļ°āļ§āļīāļāļĩ āļĄāļĩāđāļ§āđāļāļģāļāļ°āđāļĢāđāļāđāļāđāļēāļ
- Get – Retreive āļŠāļģāļŦāļĢāļąāļāļāļ request āļāļēāļ server āđāļāđāļ āļĢāļēāļĒāļāļ·āđāļāļāļąāđāļāļŦāļĄāļ āļŦāļĢāļ·āļāļĢāļēāļĒāļāļ·āđāļāđāļāļĩāđāļĒāļ§
- Post – Send āļāļēāļĢāļŠāđāļāļāđāļēāļāđāļāļĄāļđāļĨ
- Put – Update āļāļēāļĢāđāļāļĨāļĩāđāļĒāļāđāļāļĨāļ āļŦāļĢāļ·āļ Update āļāđāļēāđāļāđāļēāđāļŦāđāđāļāđāļ āļāđāļēāđāļŦāļĄāđāļāļĩāđāđāļĢāļēāļāđāļāļāļāļēāļĢ āđāļāđāļ āļāļēāļĢāđāļāļĨāļĩāđāļĒāļāļāļ·āđāļāļāļāļ users
- Delete – Remove āļāļēāļĢāļĨāļāļāđāļē
āļāļēāļĢāđāļāđ Axios āđāļ JavaScript
āđāļĢāļēāļāļ°āļāļģāļāļēāļĢāđāļāđāļāļēāļ Axios āđāļ Node.js āđāļĢāļīāđāļĄāļāđāļ āļŦāļēāļāđāļāļĢāļĒāļąāļāđāļĄāđāļĄāļĩ Node.js āļŠāļēāļĄāļēāļĢāļāļāļģāļāļēāļĢāļāļēāļ§āļāđāđāļŦāļĨāļāđāļāđāļāļĩāđ Node.js (nodejs.org) āđāļāļĒāļŠāļēāļĄāļēāļĢāļāđāļĨāļ·āļāļ version āđāļŦāļāļāđāđāļāđāļāļēāļĄāļāļ§āļēāļĄāļŠāļ°āļāļ§āļāđāļ āļāļĩāļāļĩāđ āđāļĢāļēāļāđāļāļģāđāļāļāļĩāđ path āļāļĩāđāđāļĢāļēāļāđāļāļāļāļēāļĢāļāļ°āđāļāļĩāļĒāļāđāļāđāļāđāļĨāđāļ§āļāļģāļāļēāļĢāļāļīāļāļāļąāđāļ Axios āļāđāļ§āļĒāļāļģāļŠāļąāđāļāļāđāļēāļāļĨāđāļēāļāđāļāđāđāļĨāļĒ
npm i axiosāļāļāļāļāļēāļ npm āđāļĨāđāļ§āļĒāļąāļāļŠāļēāļĄāļēāļĢāļāļāļīāļāļāļąāđāļāļāđāļ§āļĒāļ§āļīāļāļĩāļāļ·āđāļ āđ āđāļāđ āļŠāļēāļĄāļēāļĢāļāļāđāļēāļāļĢāļēāļĒāļĨāļ°āđāļāļĩāļĒāļāļāļąāđāļāļāļāļāļāļēāļĢāđāļāđāļāļēāļāđāļāļīāđāļĄāđāļāļīāļĄāđāļāđāļāļĩāđ https://axios-http.com/docs/intro
āļŦāļĨāļąāļāļāļēāļāļāļąāđāļ āļāļģāļāļēāļĢāļŠāļĢāđāļēāļāđāļāļĨāđ main.js āđāļĨāļ°āļāļģāļāļēāļĢ āđāļāļĩāļĒāļāđāļāđāļāļāļēāļĄāļāļąāļ§āļāļĒāđāļēāļ āđāļāļĒāļĄāļĩāļŦāļĨāļąāļāļāļēāļĢāļāļģāļāļēāļ āļāļąāļāļāļĩāđ
āđāļĢāļēāđāļĢāļīāđāļĄāļāļēāļāļāļēāļĢ import library Axios āļāļēāļāļāļąāđāļ āđāļĢāļēāļāļ°āđāļāđ Axios āđāļāļ·āđāļāļāļķāļāļāđāļāļĄāļđāļĨāļāļēāļ API āđāļĨāļ°āđāļŠāļāļāļāļĨāļĨāļąāļāļāđ āđāļāļĒāļāļēāļĢāļāļģāļŦāļāļāļāļąāļāļāđāļāļąāļāļāļ·āđāļ callApi āđāļāļĒāđāļāđāļāļēāļĢāļāļĢāļ°āļāļēāļĻāļāļąāļāļāđāļāļąāļāđāļāļ arrow function āđāļĨāļ°āđāļŠāđāļāļģāļŠāļąāđāļ async āđāļāļ·āđāļāļāļāļēāļāđāļĢāļēāļāļ°āđāļāđ await āđāļāļāļēāļĢāļĢāļāđāļŦāđ Axios āļāļģāļāļēāļāđāļŠāļĢāđāļāļāđāļāļ āđāļāļĒ API āļāļāļāđāļĢāļēāļāļ°āļĄāļēāļāļēāļ jsonplaceholder āļāļĩāđāđāļāđāļ API āļāļąāļ§āļāļĒāđāļēāļ āđāļĨāđāļ§āļāļģāļāļēāļĢāđāļāđ console.log(res.data) āđāļāļ·āđāļāđāļŠāļāļāļāļĨāļĨāļąāļāļāđāļāļāļāļĄāļē
const axios = require('axios')
const callApi = async () => {
await axios.get("https://jsonplaceholder.typicode.com/todos")
.then((res) => {
console.log(res.data)
})
}
callApi();āļāļģāļāļēāļĢāļĢāļąāļāđāļāđāļ āļāđāļ§āļĒāļāļģāļŠāļąāđāļ node .\main.js āļāļ°āđāļāđāļāļĨāļĨāļąāļāļāđ āļāļąāļāļĢāļđāļāļāđāļēāļāļĨāđāļēāļ
Example āļŠāļģāļŦāļĢāļąāļāļāļēāļĢāđāļāđāļāļēāļāđāļ React āļāļ§āļāļāļđāđāļāļąāļ React Hooks
āļāļēāļĢāļāļģāļāļēāļ āļāļ°āđāļāđ process āđāļŦāļĄāļ·āļāļ āđ āļāļąāļāļāļąāļ§āļāļĒāđāļēāļāļāļēāļĢāđāļāđāļāļēāļāļāļđāđāļāļąāļ JS āđāļĢāļēāļāļĢāļąāļāđāļāđāļāļąāļāļāđāļāļąāļ callApi āđāļāļ·āđāļāļāļģāđāļāđāļāđāļāļđāđāļāļąāļ useState āļŠāļģāļŦāļĢāļąāļāļāļēāļĢāđāļāļĨāļĩāđāļĒāļāđāļāļĨāļāļāđāļēāļāļāļāļāđāļāļĄāļđāļĨāđāļāļĒāđāļĢāļēāđāļĢāļīāđāļĄāļāđāļāļāļēāļāļāļēāļĢ āđāļāđ axios āđāļĨāđāļ§āđāļāđ method get āđāļāļāļēāļĢāļāļķāļāļāđāļēāļĄāļēāļāļēāļ API āļāļāļ jsonplaceholder āđāļĨāđāļ§āđāļāđāļāđāļ§āđāđāļāļāļąāļ§āđāļāļĢ res āļŦāļĨāļąāļāļāļēāļāļāļąāđāļ āļāļģāļāļąāļ§āđāļāļĢ data_format āļĄāļēāđāļāđāļāļāđāļē res.data āđāļĨāđāļ§āļāļķāļāļāļģāļāđāļē data_format āļĄāļē map āđāļāļ·āđāļāđāļāđāļāļāđāļē title āļāļāļāļāļļāļāļāļąāļ§āđāļ array āļāļāļ data_format āļĨāļāđāļāļāļąāļ§āđāļāļĢ data āļŦāļĨāļąāļāļāļēāļāļŠāļĢāđāļēāļāļāļąāļāļāđāļāļąāļāđāļŠāļĢāđāļ āđāļāļ·āđāļāđāļĄāđāđāļŦāđāđāļāļīāļāļāļēāļĢāđāļĢāļĩāļĒāļ API āļāđāļģāļāđāļāļāđāļ āļāļļāļāļāļēāļĢāļāļģāļāļēāļāļāļāļāđāļ§āđāļ āļāļģāļāļēāļĢāđāļāđ useEffect āļĄāļēāđāļĢāļĩāļĒāļāļāļąāļāļāđāļāļąāļ callApi
import axios from 'axios'
import { useEffect, useState } from 'react'
function App() {
const [data, setData] = useState([]);
const callApi = async () => {
const res = await axios.get("https://jsonplaceholder.typicode.com/todos")
const data_format = await res.data
data_format.map((item) => {
setData((prev) => [...prev, item.title])
})
}
useEffect(() => {
callApi()
},[])
return (
<>
{data.map((item, index) => {
return (
<div key={index}>
<li>{item}</li>
</div>
)
})}
</>
)
}
export default App
āļāļĨāļĨāļąāļāļāđāļāļĩāđāđāļāđāļāļāļāđāļ§āđāļ
āļŠāļĢāļļāļ
Axios āđāļāđāļāđāļāļĢāļ·āđāļāļāļĄāļ·āļāļāļąāļ§āļŦāļāļķāđāļāđāļāļāļēāļĢ āļāļąāļāļāļēāļĢāļāļąāļ HTTP request methods āļāļĩāđāļāļīāļĒāļĄāđāļāđāļāļąāļāļāļąāđāļ§āđāļ āđāļāđāļāļāļāļāļēāļ Axios āļĒāļąāļāļĄāļĩāļ§āļīāļāļĩāļāļēāļĢāļāļ·āđāļāļāļĩāļ āđāļāđāļ āļāļēāļĢ Fetch āđāļāđāļāļāđāļ āđāļĢāļēāļāļķāļāļāļģāđāļāđāļāļāđāļāļāđāļāļĻāļķāļāļĐāļē āļŦāļēāļāđāļāļāļĩāļāđāļāđāļŠāļĩāļĒāļāļāļ āļāļļāļāļāļĢāļāđāļāļĩāđāđāļĢāļēāļāļ°āļāļģāļĄāļēāđāļāđ āđāļāļ·āđāļāđāļŦāđāđāļŦāļĄāļēāļ°āļāļąāļ environment āļāļāļāđāļĢāļēāļĄāļēāļāļāļĩāđāļŠāļļāļ
