HTTPリクエストを作成するためにUni-AppのUni.Request APIを使用するにはどうすればよいですか？

HTTP要求を作成するためにUni.Request APIを使用する方法

UNI-APPのuni.request APIは、さまざまなサーバーにHTTP要求を行うための汎用性の高いツールです。これは、ネイティブXMLHTTPREQUESTオブジェクトの周りのラッパーであり、より便利でクロスプラットフォームのアプローチを提供します。使用方法の詳細な内訳は次のとおりです。

基本的な使用法：

コア関数はuni.request()であり、オプションオブジェクトを引数として取得します。このオブジェクトは、リクエストの詳細を指定します。簡単なGETリクエストは次のようになります：

 <code class="javascript">uni.request({ url: 'https://api.example.com/data', method: 'GET', success: (res) => { console.log('Request successful:', res.data); }, fail: (err) => { console.error('Request failed:', err); }, complete: (res) => { console.log('Request completed:', res); } });</code>

このコードは、 https://api.example.com/dataにGETリクエストを送信します。 successコールバックは、成功した応答を処理し、エラーfail処理し、成功や失敗に関係なくcomplete実行を処理します。 res.dataには応答データが含まれています。

高度なオプション：

uni.request 、リクエストをカスタマイズするためのさまざまなオプションをサポートしています。

• method ：HTTPメソッド（取得、投稿、配置、削除など）を指定します。デフォルトは取得します。
• data ：リクエストで送信するデータ（通常は投稿、配置など）。これはオブジェクトまたは文字列にすることができます。
• header ：HTTPヘッダーを含むオブジェクト（たとえば、 Content-Type 、 Authorization ）。
• dataType ：応答の予想データ型を指定します（「JSON」は一般的です）。
• responseType ：予想される応答タイプ（「テキスト」、「ArrayBuffer」など）を指定します。
• timeout ：リクエストのタイムアウトをミリ秒単位で設定します。

投稿の例リクエスト：

 <code class="javascript">uni.request({ url: 'https://api.example.com/submit', method: 'POST', header: { 'Content-Type': 'application/json' }, data: { name: 'John Doe', email: 'john.doe@example.com' }, success: (res) => { // ... }, fail: (err) => { // ... } });</code>

Uni-APPでUni.Requestを使用する際の一般的なエラー処理手法は何ですか？

スムーズなユーザーエクスペリエンスには、堅牢なエラー処理が重要です。 uni.requestを使用してエラーを処理するための一般的な手法を次に示します。

• failコールバック： failコールバックが主要なメカニズムです。障害に関する情報を含むエラーオブジェクトを受信します（たとえば、ステータスコード、エラーメッセージ）。これを使用して、ユーザーに有益なエラーメッセージを提供するか、デバッグのエラーをログにします。
• ステータスコードチェック： fail CallbackのHTTPステータスコードを確認します（または、より包括的な処理のためにcompleteに）。異なるステータスコードは、異なる問題（404が見つかりません、500内のサーバーエラーなど）を示します。これらのケースを異なる方法で処理し、テーラードユーザーフィードバックを提供します。
• ネットワークエラー処理：ネットワーク接続の問題を検出します。 uni.request 、インターネット接続が不足しているために失敗する可能性があります。 uni.getSystemInfoSync().networkTypeを使用して、ネットワークのステータスを確認する前に、リクエストまたはハンドルネットワークエラーをfailコールバック内で特別に処理できます。
• 試してみてください...ブロックをキャッチ：すでにコールバックを提供しているuni.requestではあまり一般的ではありませんが、 uni.requestコールをtry...catchてみることができます。
• 一般的なエラー処理：特定のエラーが不明または技術的すぎる場合、一般的なエラーメッセージをユーザーに提供します。デバッグの目的で完全なエラーの詳細を記録します。

ステータスコードチェックの例：

 <code class="javascript">uni.request({ // ... request options ... fail: (err) => { if (err.statusCode === 404) { uni.showToast({ title: 'Resource not found', icon: 'error' }); } else if (err.statusCode === 500) { uni.showToast({ title: 'Server error', icon: 'error' }); } else { uni.showToast({ title: 'An error occurred', icon: 'error' }); console.error('Request failed:', err); } } });</code>

Uni.RequestをUNI-APPプロジェクトの認証システムと統合するにはどうすればよいですか？

uni.request認証システムと統合するには、通常、各リクエストに承認ヘッダーを追加することが含まれます。このヘッダーには通常、認証されたユーザーを識別するトークン（JWT、セッションIDなど）が含まれています。

実装：

1. トークンストレージ：認証トークンを安全に保存します（たとえば、 uni.setStorageSyncおよびuni.getStorageSyncを使用してUni-Appのストレージに）。
2. ヘッダーインジェクション：各リクエストを行う前に、トークンを取得してheaderオブジェクトに追加します。

 <code class="javascript">const token = uni.getStorageSync('token'); uni.request({ url: 'https://api.example.com/protected-data', header: { 'Authorization': `Bearer ${token}` // Adjust as needed for your auth scheme }, success: (res) => { // ... }, fail: (err) => { // Handle authentication errors (eg, 401 Unauthorized) if (err.statusCode === 401) { // Redirect to login or refresh token } } });</code>

3. トークンリフレッシュ：認証システムが短命のトークンを使用する場合、トークンリフレッシュを実装します。トークンの有効期限を確認し、有効期限が切れる前に自動的に更新します。これには通常、トークン更新エンドポイントに個別のリクエストを行うことが含まれます。
4. エラー処理：認証エラー（401の許可証など）を適切に処理します。これには、ユーザーをログインページにリダイレクトするか、再認証するように促す場合があります。

Uni.Requestを使用してUNI-APPプロジェクトにファイルをアップロードできますか？

はい、 uni.requestファイルをアップロードできますが、 formData APIを使用する必要があります。方法は次のとおりです。

実装：

1. FormDataを作成します： FormDataオブジェクトを作成し、ファイルを追加します。適切なUNI-APPファイル選択API（例えば、 uni.chooseImageまたはuni.chooseVideo ）を使用してファイルにアクセスする必要があります。
2. コンテンツタイプの設定： Content-Typeヘッダーをmultipart/form-dataに設定します。
3. リクエストを送信： FormDataオブジェクトをdataとして送信します。

例：

 <code class="javascript">uni.chooseImage({ count: 1, success: (res) => { const filePath = res.tempFiles[0].path; const formData = new FormData(); formData.append('file', { uri: filePath, name: 'file.jpg', // Adjust filename as needed type: 'image/jpeg' // Adjust file type as needed }); uni.request({ url: 'https://api.example.com/upload', method: 'POST', header: { 'Content-Type': 'multipart/form-data' }, data: formData, success: (res) => { // ... }, fail: (err) => { // ... } }); } });</code>

アップロードされたファイルに従って、 nameとtypeプロパティを調整することを忘れないでください。サーバー側はmultipart/form-dataアップロードを処理するように構成する必要があります。また、進行状況インジケーターを使用して、より良いユーザーエクスペリエンスのために進行状況をユーザーにアップロードすることを検討してください。これは通常、Basic uni.request以外の異なるアプローチが必要です。

以上がHTTPリクエストを作成するためにUni-AppのUni.Request APIを使用するにはどうすればよいですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。