uniappリクエストのカプセル化

モバイル アプリケーションの急速な開発に伴い、フロントエンド フレームワークはますます多様化しています。中でも uniapp は、Vue.js をベースとしたクロスプラットフォーム開発フレームワークとして、モバイル アプリケーション開発での使用が増えています。

フロントエンド開発者として、uniapp を開発するとき、データ対話のために多くの API またはサーバー インターフェイスを使用することがよくあります。データ要求プロセスでは、コードの可読性と保守性を確保しながら、ネットワーク通信、データ形式、データのセキュリティなどの問題を考慮する必要があります。これらの問題に対処するには、API リクエストをカプセル化して、コードの可読性と保守性を向上させることができます。

uniapp のリクエストのカプセル化を紹介しましょう。

1. ネットワーク リクエスト

uniapp でネットワーク リクエストを送信するには、uni.request() を使用する必要があります。この関数は非同期関数であり、Promise を使用してカプセル化する必要があります。以下は簡単なカプセル化の例です。

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

このカプセル化関数では、リクエスト メソッド、リクエスト URL、およびリクエスト データを渡す必要があります。さらに、この関数はリクエスト ヘッダー、リクエストの成功と失敗のコールバック関数も定義します。

2. 統合されたエラー処理

リクエストをカプセル化するプロセスでは、リクエスト内のエラー処理を考慮する必要があります。エラー処理プロセスでは、エラーコードを統一的に処理することでコードの保守性を向上させることができます。以下は、一般的なエラー コード処理の例です。

export function request(method, url, data = {}) {
  return new Promise((resolve, reject) => {
    uni.request({
      method,
      url,
      data,
      header: {
        'content-type': 'application/json',
      },
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data);
        } else {
          reject(new Error(res.statusCode));
        }
      },
      fail: (err) => {
        let errorMessage = '';

        if (err.errMsg.includes('timeout')) {
          errorMessage = '请求超时，请稍后重试！';
        } else if (err.errMsg.includes('abort')) {
          errorMessage = '请求数据错误，请重试！';
        } else {
          errorMessage = '网络请求错误，请检查网络连接！';
        }

        reject(new Error(errorMessage));
      },
    });
  });
}

このカプセル化された関数では、さまざまなタイプのエラー コードを判断して、さまざまなエラー プロンプト メッセージを定義します。このアプローチにより、コードの保守が容易になります。

3. リクエストの構成

頻繁に使用される API インターフェイスについては、よりきめ細かい方法でリクエストをカプセル化できます。リクエストを送信するプロセス中に、リクエストのさまざまなオプションとパラメータを定義して、より柔軟で効率的なリクエストを実現できます。

以下はリクエスト構成の例です:

const requestConfig = {
  baseUrl: 'https://example.com',
  timeout: 5 * 1000,
  headers: {
    'Accept-Language': 'zh-CN',
  },
};

export function request(method, url, data = {}, config = {}) {
  const {
    baseUrl = '',
    timeout = 0,
    headers = {},
  } = { ...requestConfig, ...config };

  return new Promise((resolve, reject) => {
    uni.request({
      method,
      url: `${baseUrl}${url}`,
      data,
      header: {
        ...headers,
        'content-type': 'application/json',
      },
      timeout,
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data);
        } else {
          reject(new Error(res.statusCode));
        }
      },
      fail: (err) => {
        let errorMessage = '';

        if (err.errMsg.includes('timeout')) {
          errorMessage = '请求超时，请稍后重试！';
        } else if (err.errMsg.includes('abort')) {
          errorMessage = '请求数据错误，请重试！';
        } else {
          errorMessage = '网络请求错误，请检查网络连接！';
        }

        reject(new Error(errorMessage));
      },
    });
  });
}

このカプセル化関数では、ベース URL、リクエスト タイムアウト、およびリクエスト ヘッダーを定義します。関数を呼び出すと、渡された外部パラメーターは要件に従ってマージされ、より柔軟な要求構成を実現するために Accept-Language パラメーターが要求ヘッダーに追加されます。

4. リクエスト インターセプタ

複雑なアプリケーションでは、リクエストをインターセプトする必要がある場合があります。たとえば、リクエストごとに、送信前にトークン検証情報をリクエスト ヘッダーに追加する必要があります。

以下はリクエスト インターセプターの例です:

const requestConfig = {
  baseUrl: 'https://example.com',
  timeout: 5 * 1000,
  headers: {
    'Accept-Language': 'zh-CN',
  },
};

export function request(method, url, data = {}, config = {}) {
  const {
    baseUrl = '',
    timeout = 0,
    headers = {},
  } = { ...requestConfig, ...config };

  uni.addInterceptor('request', (options) => {
    options.header['token'] = uni.getStorageSync('token');
    return options;
  });

  return new Promise((resolve, reject) => {
    uni.request({
      method,
      url: `${baseUrl}${url}`,
      data,
      header: {
        ...headers,
        'content-type': 'application/json',
      },
      timeout,
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data);
        } else {
          reject(new Error(res.statusCode));
        }
      },
      fail: (err) => {
        let errorMessage = '';

        if (err.errMsg.includes('timeout')) {
          errorMessage = '请求超时，请稍后重试！';
        } else if (err.errMsg.includes('abort')) {
          errorMessage = '请求数据错误，请重试！';
        } else {
          errorMessage = '网络请求错误，请检查网络连接！';
        }

        reject(new Error(errorMessage));
      },
    });
  });
}

このカプセル化関数では、uni.addInterceptor() 関数を使用してトークン検証情報をリクエストに追加します。このようなカプセル化方式により、各リクエストを一元的に管理・処理することが可能となる。

概要

フロントエンド開発者として、コードの可読性と保守性は常に不可欠な問題です。 uniapp では、コードの再利用性とコードの可読性を可能な限り向上させるために API リクエストをカプセル化することでこの目標を達成する必要があります。同時に、リクエストのパッケージ化においても、プロジェクトごとの実際のニーズに応じてパッケージ化方法を最適化し、リクエスト業務の効率化を実現します。

以上がuniappリクエストのカプセル化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。