How to Send HTTP Request to Laravel API with VueJs (Axios) ?

Axios Http Request

Hello developers!

I usually write for Laravel but at the same time, I have knowledge about FrontEnd technologies and I want to share my experience for VueJs. It’s one of most popular Javascript framework and it really works very compatible with Laravel.

Firstly, I want to mention about VueJs learning cycle. If you are familiar with Javascript, Jquery… It’s easy to learn VueJs then. If you don’t have any experience with these technologies, you can look on it a bit but still you can learn directly VueJs.

To be honest, I had to explain first how to install VueJs to Laravel project but I will write another special content for this.

We can start learning to request api with Axios !

What is Axios ?

Axios is a library for Http requests through API. If you familiar with jquery, axios is like Ajax. When you want to get data or any response from API without reaload to page, you can use Axios.

You can make easly http request like POST, GET, PUT, DELETE …

Install Axios

You need to install Axios library to your current project as below and to install this, you need to npm (NodeJs Package Manager).

npm install --save axios

After the installation, you can use axios in your VueComponent. In previous VueJs version, you may need to import axios directly but if you are using latest versions of VueJs, you don’t need to import anything. You can use directly in your component.

First (GET) Request with Axios

Firstly, we can describe a basic endpoint to get a message response from Laravel.

Route::get('get-message', function (){
    return response()->json([
        'message' => 'Hello there, it\'s your first response.'
    ], 200);
});

As you can see above, api will response a basic content.

In your component, you need to find “methods”. If it’s not described yet in your component, you can describe it immediately.

methods: {

}

You can now describe your all functions here which you will use it in your component.

getMessageWithAxios(){
    axios.get('/get-message').then(response => {
        alert(response.data.message);
    });
},

We can add a button to call our function and it’s really so easy to call that. VueJs has “click” function to call it. As you can see below, we called our function directly.

<template>
 <div>
     <button @click="getMessageWithAxios">Get Message With Axios</button>
 </div>
</template>

Everything is just this. Right now, When we click to our button, we will get a message from api and display it in alert box as below.

Axios Response in Alert Box

Also you can monitoring your request in your browser with developer tools.

In a few minutes (of course, you need a little bit experience with this) we prepared our first API request in VueJs. You can use axios library in your projects. I really like to use it because, easy to use and compatible with Laravel.

POST Request with Axios

We can make a POST request also. We can describe a basic route for this on BackEnd.

Route::post('post-data', function (\Illuminate\Http\Request $request){
    return response()->json([
        'message' => 'Your requested data is : ' . $request->full_name
    ]);
});

As you see above, we will send data to backend and we will get back it with a message parameter.

We can describe second button for POST request.

<template>
<div>
     <button @click="getMessageWithAxios">Get Message With Axios</button>
<button @click="postDataWithAxios">POST data With Axios</button>
</div>
</template>

Our second button will call “postDataWithAxios” function when clicked. Our function will be like below :

postDataWithAxios(){

  axios.post('/post-data', {full_name : 'Aziz Sancar'}).then(response => {
      alert(response.data.message);
  });

},

in this example, we used axios.post to able to make post request through API. As you can see, we have a variable named as full_name in our request body. We can catch it in backend with this key.

$request->full_name

If everything is fine with our example, we will get a response as below in our message box.

Post Request in Message Box

We can monitoring our request in our browser.

Axios post response in developer tool

But there is another important thing that we can display in our browser. If you click to payload section in your browser, you can see the data which we imported to our request body.

Okey, we did it !

Actually, Axios has many functionality to optimize your project but this information enough to do this for now. I always follow “step by step” discipline to protect my motivation. This is my suggestion for you !

Now, you can try to http request and inform me about it ! Share your thoughts about this content and let me increase my explanation skills !

Thank you for your time.

Think, Search, Share and Learn…

Enjoy your Coding !

Enver ŞANLI

BackEnd Developer & Social Thinker

Sources :

Using Axios to Consume APIs - Vue.js