Vueでaxiosをカプセル化する方法

npm install axios; // axiosをインストール

'axios' から axios をインポートします

const baseUrl = API_BASE_URL // webpackのプラグインDefinePluginによってwebpackConfigに注入される
    .plugin('定義')
        .use(require('webpack/lib/DefinePlugin'), [{
            // NODE_ENV 環境変数、開発環境は: 'development'、テスト環境のパッケージが本番環境と一致するように、テスト環境と本番環境は両方とも 'production' です。
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
            // 現在のアプリケーション環境 (開発環境: 'dev'、テスト環境: 'test'、本番環境: 'prod')
            'process.env.APP_ENV': JSON.stringify(process.env.APP_ENV),
            //バックエンドインターフェースリクエストアドレス 'API_BASE_URL': JSON.stringify(config.meshProp('apiBaseUrl')),
            // ホームページパス 'APP_INDEX_PATH': JSON.stringify(indexPath),
            // ルーティングモード 'APP_ROUTER_MODE': JSON.stringify(config.meshProp('routerMode')),
            // Element コンポーネント ライブラリ 'APP_USE_ELEMENT' を使用するかどうか: JSON.stringify(config.meshProp('useElement')),

}])

定数パス = require('path')
定数os = require('os')
const packageName = 'focm' // プロジェクトパッケージ名 const localIP = getLocalIP() // ローカル IP アドレス module.exports = {
    //デフォルト設定 default: {
        // システム名。ページ ヘッダーのタイトルを設定するために使用されます
        アプリ名: 'xxxxx',
        // マルチページアプリケーションかどうか isMulti: false,
        // モバイル端末をサポートするかどうか isMobile: false,
        // Element コンポーネント ライブラリ (https://element.eleme.cn/#/zh-CN/) を使用するかどうか
        useElement: true、
        // ルーティング モード (値はハッシュまたは履歴、参照: https://router.vuejs.org/)
        ルーターモード: 'ハッシュ'、
        // API リクエスト ルート パス apiBaseUrl: '',
        ....
    },
    // 開発環境の設定 dev: {
        apiBaseUrl: '/api',
        ホスト: ローカルIP、
        ポート: 8080、
        autoOpenBrowser: true, // ブラウザを自動的に開くかどうか writeToDisk: false, // 生成されたファイルをディスクに書き込むかどうか proxyTable: {
            '/api': {
                ターゲット: 'http://focm-web.focms.paas.test',
                変更元: true
                }
            }
    },
    // テスト環境構成テスト: {
        // API リクエスト ルート パス apiBaseUrl: '/focm',
        出力ルート: path.resolve(__dirname, 'dist/test'),
        公開： {
            リモートホスト: 'xxxx',
            リモートポート: '22',
            リモートユーザー名: 'qinglianshizhe',
            リモートパスワード: 'xxxxxx',
            リモートアプリケーションルート: `/xxx/xxx/${packageName}`,
            ウェブURL: 'http://xxxxx.com/'
        }
    },
    // 本番環境の構成 prod: {
        ...
    }
}

// ローカルIPを取得する
関数 getLocalIP() {
    インターフェースをos.networkInterfaces()にします
    for(インターフェース内のdevName){
        iface = インターフェース[devName]とします
        for(let i=0;i<iface.length;i++){
            alias = iface[i]とします。
            if(alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal){
                alias.address を返します。
            }
        }
    }
    'localhost' を返す
}

/**
 * ビジネス例外クラス */

クラス BusinessError は Error を拡張します {
    コンストラクタ（コード、メッセージ、データ）{
        スーパー(メッセージ)
        this.code = コード
        this.name = 'ビジネスエラー'
        this.data = データ
    }
}
/**
 * システム例外クラス */
クラス SystemError は Error を拡張します {
    コンストラクタ（コード、メッセージ、データ）{
        スーパー(メッセージ)
        this.code = コード
        this.name = 'システムエラー'
        this.data = データ
    }
}
// axios 設定 axios.defaults.timeout = 10000
axios.defaults.headers.post['Content-Type'] = 'application/json; charset=UTF-8'

// POSTリクエストを実行する function post (option, vm) {
    オプション.メソッド = 'POST'
    http(オプション、vm) を返す
}

// GETリクエストを実行する function get (option, vm) {
    オプション.メソッド = 'GET'
    http(オプション、vm) を返す
}

// ダウンロード要求関数 download (option, vm) {
    オプション.メソッド = オプション.メソッド || 'GET'
    オプション.isDownload = true
    オプション.responseType = 'blob'
    http(オプション、vm) を返す
    }

/**
* リクエストバックエンドインターフェース* @param オプションパラメータ* url: リクエストパス（baseUrlの後に「/」で始まり、連結されます）
* データ: リクエストパラメータオブジェクト * タイムアウト: リクエストタイムアウト (デフォルト: 10000、つまり 10 秒)
* toastError: ビジネス例外情報を自動的にプロンプ​​トします。デフォルトは true で、false の場合は自動プロンプトは表示されません。 * @param vm Vue オブジェクト (例外が発生したときにトーストで例外情報を自動的にプロンプ​​トするために使用されます)
* @return {Promise} Promiseオブジェクト */

関数 http (オプション, vm) {
    新しい Promise を返します ((resolve, reject) => {
        メソッド = オプション.メソッド || 'POST'
        url = baseUrl + option.url とします。
        タイムアウト = オプション.タイムアウト || 10000
        headers = option.headers || {} とします。
        responseType = option.responseType とします
        let data = {} // ここでデフォルト値を設定できます if (option.data) {
            if (option.data インスタンス FormData) {
                ヘッダー['Content-Type'] = 'multipart/form-data'
                formData = option.data とします
                Object.keys(data).forEach((key) => {
                    formData.append(キー、データ[キー])
                })
                データ = フォームデータ
            } それ以外 {
                データ = { ...データ、...オプションデータ }
            }
        }

        requestOptions = { メソッド、 URL、 ヘッダー、 タイムアウト、 レスポンスタイプ } とします。
        メソッドtoUpperCase()が'GET'の場合{
            requestOptions.params = データ
        } それ以外 {
            requestOptions.data = データ
        }
        axios(requestOptions).then( (res) => {
            const contentDisposition = res.headers['content-disposition']
            // ファイルのダウンロード if (contentDisposition &&
        (/filename\*=UTF-8''(.*)/.test(contentDisposition) || /filename="(.*)"/.test(contentDisposition))) { // ファイルのダウンロードの場合 const utf8Match = contentDisposition.match(/filename\*=UTF-8''(.*)/) // UTF-8 ファイル名に一致 const normalMatch = contentDisposition.match(/filename="(.*)"/) // 通常の英語ファイル名に一致 const filename = utf8Match ? decodeURIComponent(utf8Match[1]) : normalMatch[1]
                const blob = 新しい Blob([res.data])
                定数ダウンロード要素 = document.createElement('a')
                const href = window.URL.createObjectURL(blob)
                ダウンロード要素.href = href
                downloadElement.download = ファイル名
                document.body.appendChild(ダウンロード要素)
                ダウンロード要素.click()
                document.body.removeChild(ダウンロード要素)
                window.URL.revokeObjectURL(href)
                解決する
            } else { // JSON 情報 getResponseInfo(res).then((resInfo) => {
                    応答情報ハンドル(resInfo、resolve、reject、option、vm、requestOptions)
                })
            }
        }, エラー => {
            エラーハンドル(err、拒否、オプション、vm)
        }).catch(関数(エラー) {
            エラーハンドル(err、拒否、オプション、vm)
        })
    })

}

// 応答情報を処理する関数 responseInfoHandle (resInfo, resolve, reject, option, vm) {
    // リクエストは成功しましたか? let isSuccess = resInfo.retCode === '200'
    // ステータスコード let code = resInfo.retCode
    // 説明情報 let message = resInfo.retMsg || 'リクエストが失敗しました! '
    // データ let resData = resInfo.data || {}
    if (isSuccess) { // リクエスト成功console.log(`[${option.method || 'POST'}]${option.url} リクエスト成功!\nリクエストパラメータ:`, option.data, '\nレスポンス結果:', resInfo)
        解決(resData)
    } else { // ビジネス例外 console.error(`[${option.method} || 'POST']${option.url} リクエストが失敗しました!\nリクエストパラメータ:`, option.data, '\nレスポンス結果:', resInfo)
        err = new BusinessError(コード、メッセージ、resData) とします。
        エラーハンドル(err、拒否、オプション、vm)
    }
}

// レスポンス情報JSONオブジェクトを取得する function getResponseInfo (res) {
    新しい Promise を返します ((resolve, reject) => {
        // 返される情報 let resInfo = res.data
        if (resInfo インスタンスBlob) {
            const リーダー = 新しい FileReader()
            リーダー.readAsText(resInfo, 'utf-8')
            リーダー.onload = () => {
                resInfo = JSON.parse(リーダー.結果)
                解決(resInfo)
            }
        } それ以外 {
        解決(resInfo)
        }
    })
}

/* 例外処理 */
関数 errorhandle (err, 拒否, オプション, vm) {
    エラー = null とする
    if (err.name === 'BusinessError') {
        エラー = エラー
    } それ以外 {
        console.error(option.url, 'リクエストが失敗しました!', err.code, err)
        error = new SystemError(500, '申し訳ございません。システムエラーが発生しました。しばらくしてからもう一度お試しください。')
    }
    console.log('エラー = ', エラー)
    もし（VM）{
        if (error.name === 'BusinessError') { // ビジネス例外 // 権限なし if (error.code === 'xxx') {
                error.ignore = true
                権限がない場合
                    vm.$popupAlert({
                        タイトル: 「ヒント」
                        メッセージ: 'ログインしていないか、セッションが期限切れです。もう一度ログインしてください。 '、
                        幅: 330,
                        高さ: 180,
                        btnText: 'もう一度ログイン',
                        オンOK: () => {
                            isShowUnauthorized = false // 再ログインポップアップボックスを表示するかどうかは true に設定
                            // ログインページに移動します。ログインに成功したら、元のパスに移動します vm.$router.push({ name: 'login', params: { fromPath: vm.$route.fullPath } })
                            vm.$eventBus.$emit('NO_AUTH_EVENT')
                        }
                    })
                    isShowUnauthorized = true // 再ログインポップアップボックスを表示するかどうかをtrueに設定します
                }
                error.ignore = true
            } そうでない場合 (option.toastError !== false) {
                vm.$toast({ タイプ: 'error'、 メッセージ: error.message })
            }
        } else { // システム異常 vm.$toast('ネットワーク異常!')
        }
    }
    拒否(エラー)
}

エクスポートデフォルト{
    ベースURL、
    http,
    役職、
    得る、
    ダウンロード
}

'vue' から Vue をインポートします
'@/assets/js/api.js' から api をインポートします。

エクスポートデフォルト{
    インストール （） {
        Vue.prototype.$api = api
    }
}

'./plugins/apiPlugin.js' から ApiPlugin をインポートします。

//バックエンドインターフェースプラグイン Vue.use(ApiPlugin)

this.$api.dow​​nload({
    URL: '/xxx/xxx/xxx',
    データ:パラメータ
}、 これ）

this.$api.get({
    URL: `/xxx/xxx/xx`,
    データ:パラメータ
}, this).then((res) => {
    コンソール.log(res)
})

this.$api.post({
    url: '/api/basicList/query',
    データ:パラメータ
}, this).then(res => {
})