Axios

Michael Minchang Kim·2020년 7월 14일

Installing Axios

npm i axios

What is Axios?

Axios is a "promise based HTTP client for the browser and node.js"

So what does this mean? What is a promise and what does a HTTP client do?

Promise

A promise is used to handle asynchronous operations without the use of callback functions.
With callback functions, operations have to be nested within each other.
( So called Callback Hell)

              doSomething(function(result) {                
                doSomethingElse(result, function(newResult) {
                  doThirdThing(newResult, function(finalResult) {
                    console.log('Got the final result: ' + finalResult);
                  }, failureCallback);
                }, failureCallback);
              }, failureCallback);

Promises allow for a cleaner code by using .then.

              doSomething()
              .then(function(result) {
                return doSomethingElse(result);
              })
              .then(function(newResult) {
                return doThirdThing(newResult);
              })
              .then(function(finalResult) {
                console.log('Got the final result: ' + finalResult);
              })
              .catch(failureCallback);

HTTP Client

A HTTP Client simply handles the HTTP requests and the responses.
*More info on HTTP Requests on previous post.

Why Axios?

What is the benefit of using axios over fetch?
Axios allows you to create new instances of axios using custom configuration using the .create() method.

This allows for a highly effective way to organize all the API requests within a project.

By creating one file or folder that contains all the custom Axios and exporting it,
you can add, remove, edit, refactor all in one place.

Creating an axios instance

You can create an instance by using axios.create() and feeding the method a custom configuration in the form of an object.

		const apiUrl = 'https://some-domain.com'
                
                const authAxios = axios.create({
                    baseURL: `${apiUrl}API`,
                    timeout: 1000,
                    headers: {
                      Authorization: `Token ${accessToken}`,
                    },
                  });

Using an axios instance

                authAxios
                  .get("/1/kanban/")
                  .then((res) => console.log("res", res.data))
                  .catch((err) => console.log(err));

Using .get() allows you to add additional endpoints, url parameters, or querystrings to the preset baseURL.
.then() is equal to the one in fetch except for the fact that you do not have to change the response from json format.
.catch() handles errors since axios is a promise.

Michael Minchang Kim

Soon to be the world's Best programmer ;)

이전 포스트

fetch from backend

다음 포스트

Deploying a Service's Frontend Through AWS

98개의 댓글

Rizwan Ali

2025년 3월 15일

You’ve got some interesting points in this article. I would have never considered any of these if I didn’t come across this. Thanks!.직장인 대출

답글 달기

ali umair

2025년 4월 15일

I had most recently initiated a fabulous web page, the details you will provide you with here comes with really bajakscatter 여성알바 수원가라오케 바이낸스 수수료 호텔스닷컴 할인코드

답글 달기

ali umair

2025년 4월 17일

This approach is an excellent content Document personally seen merit to present the software. Propose being very careful the things I needed to work out intend for long term future you should maintain just for stating a very remarkable content. online sex shop

답글 달기

goias

2025년 4월 19일

Today, I was just browsing along and came upon your blog. Just wanted to say good blog and this article helped me a lot, due to which I have found exactly I was looking. manaplay

답글 달기

ali umair

2025년 4월 22일

I had most recently initiated a fabulous web page, the details you will provide you with here comes with really helped
mahjong ways 3
toto togel
togel online
koitoto
toto togel online
togel online

답글 달기

goias

2025년 4월 27일

I have read your blog it is very helpful for me. I want to say thanks to you. I have bookmark your site for future updates. situs slot online

답글 달기

fariha naz

2025년 4월 28일

Superbly written article, if only all bloggers offered the same content as you, the internet would be a far better place..GWEN 189

답글 달기