uniappリクエストでパブリックヘッダーを設定する方法（2つの方法）

開発プロセス中、私たちはクロスプラットフォーム アプリケーションを構築するために UniApp をよく使用します。 UniApp は Vue.js をベースにしたオープン ソース フレームワークで、Vue.js コアといくつかのクロスプラットフォーム機能をパッケージ化して、完全な開発エクスペリエンスを提供します。開発プロセスでは、データを取得するためにネットワーク リクエストを送信する必要がよくありますが、このときリクエストの正確さと有効性を確保するためにいくつかのパブリック ヘッダー パラメーターを設定する必要があります。

UniApp では、カプセル化された uni.request を使用してネットワーク リクエストを送信できます。 uni.request は優れたクロスプラットフォーム パフォーマンスを備えており、UniApp のネイティブ XMLHttpRequest とネイティブ axios 拡張機能をカプセル化し、HTTP/HTTPS リクエストの開始に使用できます。パブリックヘッダーパラメーターを設定するには、一般的に次の 2 つの方法があります。

方法 1: リクエストのオプションで設定

// main.js
Vue.prototype.$http = function (url, data, method) {
  let token = uni.getStorageSync('token');
  let header = {
    'Authorization': token,
    'Content-type': 'application/json'
  };
  return uni.request({
    url,
    data,
    method,
    header
  })
}

// 调用
this.$http('/api/user', { id: 123, name: 'Tom' }, 'GET').then(res => {
  console.log(res)
})

このうち、$ttp メソッドは main.js で定義され、パブリック ヘッダーのパラメーターはオプションで設定され、特定のパラメータはパラメータを呼び出すときに渡されます。

方法 2: インターセプターによる統一設定

// request.js
export function request(opts) {
  let token = uni.getStorageSync('token');
  let header = {
    'Authorization': token,
    'Content-type': 'application/json'
  };
  const interceptor = {
    request: (opts) => {
      opts.header = header;
      return opts;
    },
    response: (res) => {
      const { statusCode, data } = res;
      if (statusCode === 200) {
        return data;
      } else {
        uni.showToast({
          title: '请求失败',
          icon: 'none'
        })
        return Promise.reject(res);
      }
    }
  }
  uni.addInterceptor(interceptor);
  return uni.request(opts).finally(() => {
    uni.removeInterceptor(interceptor);
  })
}

// 调用
request({
  url: '/api/user?id=123&name=Tom',
  method: 'GET'
}).then(res => {
  console.log(res);
})

この方法では、リクエスト関数を定義します。リクエストはインターセプターを通じてインターセプトされ、パブリック ヘッダー パラメーターが設定されて渡されます。 uni.request を使用してリクエストを開始します。 request を呼び出すときは、特定のパラメーターを渡すだけで済みます。

まとめると、UniApp でパブリック ヘッダー パラメーターを設定することは難しくなく、uni.request のオプションで設定するだけで済みますが、インターセプターを使用して均一に設定することもできます。これにより、コードの再利用性が向上し、繰り返しコードを記述する回数が減るため、これは良い選択です。

以上がuniappリクエストでパブリックヘッダーを設定する方法（2つの方法）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。