uniappでデフォルトのリクエストメソッドを変更する方法

フロントエンド テクノロジの継続的な更新に伴い、開発に uniapp を使用しようとする開発者が増えています。このクロスプラットフォーム開発フレームワークを使用すると、開発者は 1 つのコードを作成するだけで、複数のプラットフォームで実行できます。ただし、開発に uniapp を使用する場合、デフォルトのネットワーク リクエスト メソッドが特定の状況に適していない可能性があるため、変更が必要になるなど、いくつかの問題が発生する可能性があります。この記事では、uniapp のデフォルトのリクエストメソッドを変更する方法を紹介します。

uniapp のデフォルトのネットワーク リクエスト メソッドは uni.request() を使用します。これは、wx.request() をカプセル化するメソッドであり、さまざまなプラットフォームで使用できます。このメソッドはデフォルトで GET リクエストを使用します。パラメータを渡すことで、URL、リクエスト ヘッダーなどのリクエストの一部の構成を変更できます。

ただし、実際の開発では、POST、PUT などの他のリクエスト メソッドを使用する必要がある場合があります。現時点では、複数のリクエスト メソッドをサポートするために uni.request() をカプセル化する必要があります。以下は、Promise を使用して uni.request() をカプセル化するサンプル コードです。

function request(url, method, data) {
  return new Promise((resolve, reject) => {
    uni.request({
      url: url,
      method: method,
      data: data,
      header: {
        'content-type': 'application/json'
      },
      success: res => {
        resolve(res.data)
      },
      fail: err => {
        reject(err)
      }
    })
  })
}

このメソッドは、URL、リクエスト メソッド、リクエスト データの 3 つのパラメータを受け取り、Promise オブジェクトを返します。実際の使用では、このメソッドを呼び出し、対応するパラメーターを渡して、さまざまなリクエスト メソッドを実装できます。

たとえば、POST リクエストを使用する必要がある場合は、次のように呼び出すことができます:

request('http://example.com/api/user', 'POST', {username: 'admin', password: '123456'})
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.error(err)
  })

同様に、PUT リクエストを使用する必要がある場合は、リクエストを変更するだけです。 PUTするメソッド。

リクエスト メソッドの変更に加えて、リクエスト ヘッダーとリクエスト パラメーターも変更できます。たとえば、すべてのリクエストにトークン検証を追加する必要がある場合は、ヘッダー パラメーターを変更できます。

let token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c'

uni.request({
  url: 'http://example.com/api',
  method: 'GET',
  header: {
    'Authorization': 'Bearer ' + token
  },
  success: res => {
    console.log(res.data)
  },
  fail: err => {
    console.error(err)
  }
})

これにより、各リクエストのヘッダーに Authorization パラメーターが追加されます。

単一のリクエストでパラメータを追加するだけでなく、グローバル設定のデフォルトパラメータを変更することもできます。 uniapp は、main.js ファイルで構成できる $https 構成パラメーターを提供します:

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

Vue.prototype.$https = uni.request
const baseUrl = 'http://example.com/api'

uni.$https.defaults.baseURL = baseUrl
uni.$https.defaults.header = {
  'content-type': 'application/json'
}

App.mpType = 'app'

const app = new Vue({
  ...App
})
app.$mount()

上記のコードでは、uni.request を Vue.prototype.$https に割り当てます。 $https を使用してネットワーク リクエストを作成します。また、baseURL やヘッダーなどのグローバルなデフォルト パラメータを保存するために、defaults 属性を $https に追加しました。

デフォルトのリクエスト メソッドを変更した後、クロスドメイン リクエストがブラウザによってインターセプトされるなど、いくつかの問題が発生する可能性がありますが、サーバー上でクロスドメイン アクセスを構成することで解決できます。リクエスト中にエラーが発生する エラーは catch でキャプチャされ、それに応じて処理されます。

つまり、uniapp は柔軟なネットワーク リクエスト メソッドを提供しており、実際の開発では、開発者はニーズに応じてさまざまなリクエスト メソッドとリクエスト パラメータを自由に選択して、より洗練されたネットワーク リクエスト要件を実現できます。

以上がuniappでデフォルトのリクエストメソッドを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。