ホームページ  >  記事  >  ウェブフロントエンド  >  uniappリクエストでパブリックヘッダーを設定する方法(2つの方法)

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

PHPz
PHPzオリジナル
2023-04-17 10:30:271709ブラウズ

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。