web-dev-qa-db-fra.com

Comment appeler un appel axios / api dans l'application Nativescript

J'essaie de construire une petite application sur Nativescript-vue où j'ai du backend laravel framework pour les appels api qui doit être appelé pour obtenir les données pertinentes. Par exemple, si l'utilisateur souhaite se connecter, il doit valider ses informations d'identification via api oauth/token donc j'essaie d'appeler cela par axios voici mon code:

Ma settings.js le fichier contient.

export const authHeader = {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
}

ceci est importé dans mes appels axios:

const postData = {
    grant_type: 'password',
    username: user.email,
    password: user.password,
    client_id: clientId,
    client_secret: clientSecret,
    scope: '',
    provider: provider
}
const authUser = {}
axios.post(authUrl, postData, {headers: authHeader}).then(response => {
    console.log('Inside oauth/token url')
    if(response.status === 200)
    {
        console.log('response received')
    }
})
.catch((err) => {
    if(err.response.status === 401){
       reject('Validation error')
    }
    else
       reject('Something went wrong')
})

quand j'essaye de construire avec la commande tns debug Android --bundle Je reçois chrome-devtools qui me montre:

api being called

En creusant plus profondément, je peux voir que des en-têtes sont passés mais ceux-ci ne sont que provisoires:

headers

Comme vous pouvez le voir, j'ai console.log dans mon application qui me montre:

console.log

Même lors de la compilation, j'obtiens les erreurs suivantes:

compiling error

Guidez-moi comment puis-je y parvenir. Merci.

Modifier:

De même, j'ai utilisé nativescript's propre httpdocumentation quelque chose comme ceci:

const httpModule = require("http");

httpModule.request({
    url: "http://iguru.local/oauth/token",
    method: "POST",
    headers: { "Content-Type": "application/json" },
    content: JSON.stringify({
        grant_type: 'password',
        username: this.user.email,
        password: this.user.password,
        client_id: 'check',
        client_secret: 'check',
        scope: '',
        provider: 'check'
    })
}).then((response) => {
    // Argument (response) is HttpResponse
    console.log('Action called')
    if(response.status === 200)
    {
        console.log('Response recieved')
    }
}, (e) => {
    console.log('Something went wrong')
});

J'obtiens le même résultat, de plus j'ai essayé l'api depuis l'extrémité du serveur http://confidenceeducare.com/oauth/token cela se trouve être le même. L'application normale Vue appelle parfaitement l'api. Je suppose qu'il y a un problème avec l'application nativescript. Dois-je importer quelque chose de plus? Je suis coincé avec ça.

Si quelqu'un pense que le point final de mon API est cassé, j'ai essayé d'utiliser les URL mentionnées dans l'exemple, c'est-à-dire https://httpbin.org/post:

http

et:

enter image description here

Lorsque j'ai vérifié mon API dans postman ça fonctionne là-bas, j'obtiens au moins une réponse avec le code d'état:

postman response

Édition 2: Pour le référentiel github de référence https://github.com/nitish1986/sample_mobile_app

javascriptvue.jsaxiosnativescriptnativescript-vue
6
Nitish Kumar

Le problème est lié à la façon dont axios est importé. Essayer:

import axios from 'axios/dist/axios'

cela résout également le Module not found: Error: Can't resolve 'net' in... Erreur.

Lors de l'importation du package normalement, mes demandes ont échoué, renvoyant l'erreur

Error in v-on handler (Promise/async): "Error: Request failed with status code null"
1
belvederef