axios call to Laravel function retured Promise object error

I have to get data from the Laravel model function.

public function getTank($id)
{

    $tank = Tank::find($id);

    return $tank->tankno;
}

For this, the following function is being called.

  async function getTank(tank){
    let url = '/gettank/'+tank;
    
    let abc= await axios.get(url)
           .then(function(response){
              return     (response.data);
            })
            .catch(function(error){
                   console.log(error);
             });
    return(abc)
    
    }

and passing tankno from vue code

 <tr v-for="(item, index) in fdetail" :key="item.id">
         <td>
          {{getTank(item.id)}}

         </td>
</tr>

I want to display returned data but the result is Promise Object.

SilenceBringer

3 years ago

Level 55

@muazzamazaz in you case it make sence to eager load tankno with fdetail data instead of doing ajax call for every single row

Lumethys

3 years ago

Level 5

either use async/ await or .then(). You cannot use both:

async function getTank(id){
    let url = '/gettank/'+id;
    
    let response = await axios.get(url);

    return response.data
}

Lumethys

3 years ago

Level 5

if you want error handling, use try/catch:

async function getTank(id){
    let url = '/gettank/'+id;

    try {
    	let response = await axios.get(url);
		return response.data;
	} catch (e) {
		console.log(e);
		return "oh no"
	}
}

or something along that line

Please or to participate in this conversation.