web-dev-qa-db-ja.com

Nativescriptアプリケーションでaxios / apiを呼び出す方法

関連データを取得するために呼び出す必要があるAPI呼び出し用のバックエンドlaravelフレームワークがあるNativescript-vueで小さなアプリケーションを構築しようとしています。たとえば、ユーザーがログインしたい場合、api oauth/tokenを介して資格情報を検証する必要があるため、axiosを介してこれを呼び出そうとしています。これが私のコードです。

settings.jsファイルに含まれています。

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

これは私の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')
})

コマンドtns debug Android --bundleでビルドしようとすると、chrome-devtoolsが表示されます。

api being called

さらに深く掘り下げると、ヘッダーが渡されていることがわかりますが、これらは暫定的なものです。

headers

ご覧のとおり、アプリケーション内にconsole.logが表示されています。

console.log

コンパイル中でも、次のエラーが発生します。

compiling error

どうすればこれを達成できますか。ありがとう。

編集：

同様に、私はnativescript's own httpdocumentation を次のように使用しました：

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

同じ結果が得られます。さらに、サーバーエンドからAPIを試しました http://confidenceeducare.com/oauth/token たまたま同じです。通常のVueアプリケーションは、APIを完全に正常に呼び出します。 nativescriptアプリケーションに問題があると思います。さらに何かをインポートする必要がありますか？私はそれにこだわっています。

誰かが私のAPIエンドポイントが壊れていると思っている場合は、例に記載されているURLを使用してみました。つまり、https://httpbin.org/post：

http

そして：

enter image description here

postmanで自分のAPIをチェックすると、そこで動作しているので、少なくともステータスコードを含む応答が返されます。

postman response

編集2：参照用githubリポジトリ https://github.com/nitish1986/sample_mobile_app

javascriptvue.jsaxiosnativescriptnativescript-vue
6
Nitish Kumar

問題は、axiosのインポート方法に関係しています。試してください：

import axios from 'axios/dist/axios'

これにより、Module not found: Error: Can't resolve 'net' in...エラーも解決されます。

パッケージをインポートすると通常、リクエストが失敗し、エラーが返される

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