Axios - HackMD

# Axios ## 1. How to instal - **npm** ```js= npm i axios ``` - **cdn** ``` jsx= <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.0.0-alpha.1/axios.min.js"></script> ``` ## 2. GET REQUEST - **Fetch Data** ```jsx= const res = await axios.get("URL");  console.log(res.data);  console.log(res.status); ``` - **Catch Errors** ```jsx= axios.get("URL") .then(() => {}) .catch(error => {console.log(error)}); ``` ### Example ```jsx= // fetch posts from jsonplaceholder API via Axios axios.get("https://jsonplaceholder.typicode.com/posts") .then(res => console.log(res.data)) .catch(error => console.log(error)) ``` ## 3. POST REQUEST - **Send Data With Post Method** ```jsx= axios.post("URL" , {"the object that you want to send"}); ``` ### Example ```jsx= // send new data into jsonplaceholder api via POST method axios.post("https://jsonplaceholder.typicode.com/posts", { title: "test title", body: "this is post body" }).then(res => console.log(res.data)) .catch(error => console.log(error)); ``` ## 4. PATCH REQUEST VS PUT REQUEST > **what is the difrent between PATCH and PUT?** > **PATCH:** update only data parts that are included in an object that we sent. **PUT:** replace old data with the new one. ## 5. PATCH REQUEST ```jsx= axios.patch("URL" , {"object contains only the new values"}); ``` ### Example ```jsx= // update todo title and complete state axios.patch("https://jsonplaceholder.typicode.com/todos/1", { "title": "todo after update all field", "completed": true }).then(res => console.log(res.data)) .catch(error => console.log(error)); ``` ## 6. PUT REQUEST ```jsx= axios.put("URL" , {"new object values"}); ``` ### Example ```jsx= // replace objecct 1 in todo list axios.put("https://jsonplaceholder.typicode.com/todos/1", { "userId": 2, "id": 1, "title": "todo after update all field", "completed": true }).then(res => console.log(res.data)) .catch(error => console.log(error)); ``` ## 7. DELETE REQUEST ```jsx= axios.delete("URL"); ``` ### Example ``` jsx= // delete todo in url https://jsonplaceholder.typicode.com/todos/1 axios.delete("https://jsonplaceholder.typicode.com/todos/1") .then(res => console.log(res)) .catch(error => console.log(error)); ``` ## 8. SEND MORE THAN ONE REQUEST ```jsx= axios.all([ axios.get("URL1"), axios.get("URL2") ]).then(axios.spread((url1Res , url2Res) => console.log(url1Res , url2Res))); ``` ### Example ```jsx= // more than one request axios.all([ axios.get("https://jsonplaceholder.typicode.com/posts"), axios.get("https://jsonplaceholder.typicode.com/todos") ]).then(axios.spread((posts, todos) => console.log(posts, todos))); ``` ## 9. Custom Headers >when you need to use custom headers? >example: when the api need authentication ```jsx= axios.get("URL" , { headers:{ KEY:`${API_KEY}` }, params:{"Params to send for the API with request"} }) ``` ### Example ```jsx= axios.get("https://tomtom/api/location" , { headers:{ KEY:`${process.env.TOMTOM_DEVELOPER_KEY}` }, params:{ lat:34.25, lng:32.21 } }) ```