React プロジェクトにおける axios カプセル化と API インターフェース管理の詳細な説明

//npm を使用してインストールします npm install axios; 
//yarn を使用して yarn add axios をインストールします

//index.js に axios を導入する
'axios' から axios をインポートします。
// 投稿タイプデータをシリアル化するために qs モジュールを導入します。import QS from 'qs';
//Antd のメッセージ プロンプト コンポーネント。独自の UI コンポーネントに応じて変更できます。
'antd' から { message } をインポートします

//環境変数を保存します const isPrd = process.env.NODE_ENV == 'production';

//開発環境と本番環境のベース URL を区別する
エクスポート const basciUrl = isPrd ? 'https://www.production.com' : 'http://www.development.com'

//axiosベースパスを設定する const service = axios.create({
  ベースURL: 基本URL
})
// リクエストインターセプター service.interceptors.request.use(config => { 
  // 各リクエストを送信する前に、ローカル ストレージにトークンがあるかどうかを確認します。ここで Redux を使用して、トークンをローカルで取得する方法のみを示すこともできます。
  // 存在する場合は、トークンを http リクエストのヘッダーに追加して、バックエンドがトークンに基づいてログイン ステータスを判断できるようにします。 // トークンがローカルに存在する場合でも、トークンの有効期限が切れている可能性があるため、応答インターセプターで戻りステータスを判断する必要があります。 const token = window.localStorage.getItem('userToken') || window.sessionStorage.getItem('userToken');
  //各リクエストにトークンを追加する
  config.data = Object.assign({}, config.data, {
    トークン: トークン、
  })
  //リクエストヘッダーを設定する config.headers = {
    'コンテンツ タイプ': 'application/x-www-form-urlencoded; charset=utf-8'
  }
  config.data = QS.stringify(config.data)
  設定を返す
}, エラー => { 
    エラーを返します。
})

// レスポンスインターセプター service.interceptors.response.use(response => {
  // 返されたステータスコードに基づいて異なる処理を実行します// バックエンド開発者と統一されたエラーステータスコードについて交渉してください if (response.code) {
    スイッチ (応答コード) {
      ケース200:
        応答データを返します。
      ケース401:
        //処理メソッドでログに記録されない break;
      ケース403:
        //トークン有効期限処理メソッド break;
      デフォルト：
        メッセージ.エラー(応答データ.msg)
    }
  } それ以外 { 
    応答を返します。
  }
})
//最後に、カプセル化されたaxiosエクスポートデフォルトサービスをエクスポートします

//パッケージ化されたaxiosをインポートする 
'./index' からサービスをインポートします

http://www.development.com/api/v1/article編集

エクスポート const apiArticleEdit = info => service.post('/api/v1/articleEdit', info);

React をインポートします。{ コンポーネント } を 'react' からインポートします。
 './request/api' から { apiArticleEdit } をインポートします。
デフォルトクラスAppをエクスポートし、Componentを拡張します。
  コンポーネントマウント() { 
    // API インターフェースを呼び出して 2 つのパラメータを指定します。let params = { type: 2, author: '北孤清茶' }
    apiArticleEdit(params).then(res => { 
      //データ取得成功後のその他の操作//.....
      コンソール.log(res)
    })
  }
  与える（） {
    戻る （
      <div>
        
      </div>
    ）
  }
}

//index.js に axios を導入する
'axios' から axios をインポートします。
// 投稿タイプデータをシリアル化するために qs モジュールを導入します。import QS from 'qs';
//Antd のメッセージ プロンプト コンポーネント。独自の UI コンポーネントに応じて変更できます。
'antd' から { message } をインポートします

//環境変数を保存します const isPrd = process.env.NODE_ENV == 'production';

//開発環境と本番環境のベース URL を区別する
エクスポート const basciUrl = isPrd ? 'https://www.production.com' : 'http://www.development.com'

//axiosベースパスを設定する const service = axios.create({
  ベースURL: 基本URL
})

// リクエストインターセプター service.interceptors.request.use(config => { 
  // 各リクエストを送信する前に、ローカル ストレージにトークンがあるかどうかを確認します。ここで Redux を使用して、トークンをローカルで取得する方法のみを示すこともできます。
  // 存在する場合は、トークンを http リクエストのヘッダーに追加して、バックエンドがトークンに基づいてログイン ステータスを判断できるようにします。 // トークンがローカルに存在する場合でも、トークンの有効期限が切れている可能性があるため、応答インターセプターで戻りステータスを判断する必要があります。 const token = window.localStorage.getItem('userToken') || window.sessionStorage.getItem('userToken');
  //各リクエストにトークンを追加する
  config.data = Object.assign({}, config.data, {
    トークン: トークン、
  })
  //リクエストヘッダーを設定する config.headers = {
    'コンテンツ タイプ': 'application/x-www-form-urlencoded; charset=utf-8'
  }
  // リクエストパラメータをシリアル化します。そうしないと、POST リクエストパラメータがバックエンドで正常に受信されません。config.data = QS.stringify(config.data)
  設定を返す
}, エラー => { 
    エラーを返します。
})

// レスポンスインターセプター service.interceptors.response.use(response => {
  // 返されたステータスコードに基づいて異なる処理を実行します// バックエンド開発者と統一されたエラーステータスコードについて交渉してください if (response.code) {
    スイッチ (応答コード) {
      ケース200:
        応答データを返します。
      ケース401:
        //処理メソッドでログに記録されない break;
      ケース403:
        //トークン有効期限処理メソッド break;
      デフォルト：
        メッセージ.エラー(応答データ.msg)
    }
  } それ以外 { 
    応答を返します。
  }
})
//最後に、カプセル化されたaxiosエクスポートデフォルトサービスをエクスポートします