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

Question

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));
});

We can't know for sure what the problems is if you don't add the URL and/or the BE code to which you're posting. — thefallen, Jan 16 '19 at 15:42
Thank you Randy Casburn for your reply ! Well there is no particular reason, I use axios beacause I have practised it the most, but tomorrow I will try with the http Api from Nativescript and thnak you really much for the advice :) And for the alert() I know it sounds crazy but I am using a real device, so I can't console.log() this is why I was using the alert() for debugging, and also thank you for this second advice :) — Vikman, Jan 16 '19 at 16:40

Vikman · Answer 1 · 2019-01-18T09:47:33.553

@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.

score 0 · Answer 2 · answered Oct 28 '19 at 13:41

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.

score 0 · Answer 3 · answered Oct 31 '19 at 01:35

0

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

answered Oct 31 '19 at 01:35

KitKat23

29
3

Randy Casburn · Answer 4 · 2019-01-16T16:55:53.430

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:

Using Axios for your AJAX request
Using the querystring object from NodeJS
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.

Thank you very much for your answers and your time sir ! Principally your methods has saved me and I want to thank you, unfortunately I am still getting back an empty array as a response and I can't understand why, first of all I thought that it could be a problem on the API side but I know now for sure that the API is working properly — Vikman, Jan 17 '19 at 09:31
@Vikman - need more information. Are errors received from the API? What API? Homegrown, commercial, Google, AWS? Finally, describe, in detail, the differences between the code in your NativeScript app that does not work and the "Desktop" code that does work. — Randy Casburn, Jan 17 '19 at 16:57

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

4 Answers4