vue プロジェクトの ajax/axios の一部の構成

---

序文

提示：这里可以添加本文要记录的大概内容：
フロントエンド プロジェクトでは、ajax/axios はフロントエンドおよびバックエンドのインタラクティブ データにとって不可欠なリクエスト ライブラリであり、プロジェクトは基本的に、プロジェクトをより適切に提供するためにグローバル構成を行う必要があります。この記事では、axios の基本的な構成情報をいくつかまとめます。

---

提示：以下是本篇文章正文内容，下面案例可供参考

1.axiosのインストールと導入

1.axiosをインストールする

cnpm install axios

2.プロジェクト内に設定jsファイルを作成し、axiosを導入する

• 作成されたファイルの場所は図に示されています
  
• axiosをjsファイルにインポートする

import axios from 'axios';

次に、axios の構成

1. インスタンスの作成

//通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
let baseURL = process.env.NODE_ENV === 'development' ? '/' : window.CUIT_server.API_ROOT;
//`timeout` 指定请求超时的毫秒数,如果请求时间超过了 `timeout` 的时间，请求将被中断
let timeout = window.CUIT_server.TIMEOUT;
//使用自定义配置新建一个 axios 实例
let http = axios.create({
    
    
  baseURL,
  timeout: 1000000,
  // `headers` 是即将被发送的自定义请求头
  headers: {
    
    
    'Content-Type': 'application/json'
    // Authorization: 'Bearer ' + sessionStorage.getItem('token')
  }
});

2. リクエストインターセプターの追加

http.interceptors.request.use(
  function (config) {
    
    
  	//请求开始时页面统一的加载转圈效果
    globalLoading.showFullScreenLoading();
    return config;
  },
  function (error) {
    
    
    return Promise.reject(error);
  }
);

3. 応答インターセプターを追加する

http.interceptors.response.use(
  function (response) {
    
    
  	//响应300ms后，隐藏加载转圈效果
    setTimeout(() => {
    
    
      globalLoading.tryHideFullScreenLoading();
    }, 300);

    if (response.data.code == 3) {
    
    
      router.push({
    
     path: '/' });
    }
    let token = sessionStorage.getItem('token');
    if (token == 'null') {
    
    
      if (window.location.hash == '#/forgotPassword') {
    
    
        router.push({
    
     path: '/forgotPassword' });
      } else {
    
    
        router.push({
    
     path: '/' });
      }
    }
    return response;
  },
  function (error) {
    
    
    globalLoading.tryHideFullScreenLoading();
    return Promise.reject(error);
  }
);

3. http インスタンスをエクスポートし、プロジェクト エントリ ファイルにインポートします。

1. axiosInterceptor.js で http インスタンスをエクスポートする

	export default http;

2. main.jsで導入されました

	import axiosHttp from './api/axiosInterceptor';

3. main.js のグローバル設定

	Vue.prototype.$axios = axiosHttp;

要約する

プロジェクト内の axios の構成は、プロジェクトの実際のニーズに応じて、よりカラフルにすることができます。設定の操作手順には主に次の手順が含まれます。

1. npm または cnpm で axios をダウンロードする
2. axios の設定専用のフォルダーを作成し、axios をインポートし、関連する設定を行います。
3. 構成された js ファイルをエクスポートし、グローバル構成用の main.js (プロジェクト エントリ ファイル) ファイルにインポートします。