Is there a way to send an object to an API using axios?

This the code I use:

axios.get('/api/phones/create/', {
    parameters: {
        phone: this.phone
    }
})
    .then(response => {
        console.log(response.data)
    })
    .catch(function (error) {
        console.log(error)
    })

on the php side, I have the following:

public function create($phone)
{
    return $phone;
}

I get the following error:

GET /api/phones/create 500 (Internal Server Error)
dispatchXhrRequest @ app.6007af59798a7b58ff81.js:256
xhrAdapter @ app.6007af59798a7b58ff81.js:93
dispatchRequest @ app.6007af59798a7b58ff81.js:662
app.6007af59798a7b58ff81.js:2266 Error: Request failed with status code 500
    at createError (app.6007af59798a7b58ff81.js:600)
    at settle (app.6007af59798a7b58ff81.js:742)
    at XMLHttpRequest.handleLoad (app.6007af59798a7b58ff81.js:158)

If I try, axios.get('/api/phones/create/hello') I get hello in the console log.

Is there a way to do this?

Is there a way to send an object to an API using axios?

This the code I use:

axios.get('/api/phones/create/', {
    parameters: {
        phone: this.phone
    }
})
    .then(response => {
        console.log(response.data)
    })
    .catch(function (error) {
        console.log(error)
    })

on the php side, I have the following:

public function create($phone)
{
    return $phone;
}

I get the following error:

GET http://crm2.dev/api/phones/create 500 (Internal Server Error)
dispatchXhrRequest @ app.6007af59798a7b58ff81.js:256
xhrAdapter @ app.6007af59798a7b58ff81.js:93
dispatchRequest @ app.6007af59798a7b58ff81.js:662
app.6007af59798a7b58ff81.js:2266 Error: Request failed with status code 500
    at createError (app.6007af59798a7b58ff81.js:600)
    at settle (app.6007af59798a7b58ff81.js:742)
    at XMLHttpRequest.handleLoad (app.6007af59798a7b58ff81.js:158)

If I try, axios.get('/api/phones/create/hello') I get hello in the console log.

Is there a way to do this?

• javascript
• axios

• 1 I am not sure, but Request failed with status code 500 says that is server side problem – Leguest Commented Apr 14, 2017 at 15:18
• part of the error was indeed on the php method: I did this instead: public function create(Request $request) – Warrio Commented Apr 14, 2017 at 15:54

2 Answers 2

It depends on what you mean by "send an object".

Since you're using a GET request and passing the object in the parameters, you can serialize it into query params as part of the GET request. This wouldn't really send the object but rather use it to build the query section of the URL for the GET request.

For example, here's how you can make a request to /api/phones/create?phone=123:

axios.get('/api/phones/create/', {
    params: {
        phone: '123'
    }
})

If you want to actually send the object as a serialized JSON to your API, you can use a POST or a PUT request, depending on the semantics of your API.

For example, to send { "phone": "123" } to your api, you could do:

axios.post('/api/phones/create/', {
  phone: '123'
});

Note: axios expects the key params for parameters.

First of all try with params instead of parameters.

Axios rely on promises you might need to add promise polyfill to your code if you want to support old browsers.

Here is sample request, Read official docs for more information.

axios.get('/url', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });