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

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

PHPz

リリース： 2023-04-17 10:54:59

オリジナル

1757 人が閲覧しました

開発プロセス中、私たちはクロスプラットフォームアプリケーションを構築するために 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 サイトの他の関連記事を参照してください。