Nativescript-Vue MobileApp: Axios return status:null and data:""

user_9178127 0
Viewed 1640

I am making a native app using Nativescript-Vue,in my first component I am launching a simple post request, which is working for sure (I tested it on desktop version). But for a reason that I ignore there is a problem with the response. My response shows me that the request has been sent successfully the parameters, but I am getting a status:null and a data:"". Does some of you know how I can fix this ?

To any person who is reading this topic, thank you for your time any lead would be appreciable :)

axios({
method: 'post',
url: url,
data: querystring.stringify({
grant_type: config.grant_type,
username: config.API_username,
password: config.API_password,
APIKeys: config.API_key
}),
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.then((response) => {
alert(JSON.stringify(response, null, 4));

})
.catch((error) => {
alert(JSON.stringify(error, null, 4));
});
nativescript-vue axios vuejs2 javascript
4 Answers

@RandyCasburn Thanks for your response Mr Randy Casburn, I got no errors from the API. I discuss about this topic with a collegue and he told me that with the code you provided to me, the API does not receive the request. He thinks this is because of the content type wich you set to application/json, our API only accept application/x-www-form-urlencoded, after that I tried your way by changing the content-type to application/x-www-form-urlencoded, but I got no response and I am not sure that the request was received. We use an Express API, the calls are made with axios. My code for my native app is the same for my desktop browser but I deleted it from my native app.

user_91781270

If you are testing your API on android device, be sure your post request returns something (even if it's just a success message). On IOS it's not needed, but for some reason on Android if it has no data returning, the request returns Request failed with status code null.

user_28169780

I had the same issue. I updated the axios version to 0.19.0. Problem solved

user_90488550

Hi Vikman and welcome to SO.

You have confused yourself because you are attempting to use three different APIs from three different platforms simultaneously. This is what I mean:

  1. Using Axios for your AJAX request
  2. Using the querystring object from NodeJS
  3. Using the alert() function from the Window context of a web browser

First, I recommend making your life easier by sticking solely to the NativeScript APIs. You don't need 2000 lines of Axios to save a few keystrokes. The Axios documentation has convinced you that you must use the querystring.stringify() method to pass query parameters along with your request. Unfortunately, the querystring object is a NodeJS object and may or may not be available in the Android/iOS runtimes. So eliminate Axios and make your life easier.

Finally, make sure you are not using code that is designed to only work in the browser (like alert()) or only in NodeJS (but not the native runtimes).

To ensure you post works, using the NativeScript HTTP API that is documented here:

https://docs.nativescript.org/ns-framework-modules/http

Change your code to this:

const httpModule = require("http");
const dialogs = require("tns-core-modules/ui/dialogs");

httpModule.request({
    url: url,
    method: "POST",
    headers: { "Content-Type": "application/json" },
    content: JSON.stringify({
        grant_type: config.grant_type,
        username: config.API_username,
        password: config.API_password,
        APIKeys: config.API_key
      })
}).then((response) => {
    const result = response.content.toJSON();
    dialogs.alert(result);
}, (e) => {
    dialogs.alert(JSON.stringify(e));
});

That will work in your NativeScript environment.

EDIT: After reading your comment about the device and the alert I edited the code to accommodate that.

user_90783410
Related