Vue プロジェクトで axios リクエストを使用する方法

this.$axios.post("/user/add", {
    パラメータ: {
        名前: this.name,
        年齢: this.age
    }
})
.then(res => {
    コンソール.log(res)
})
.then(err => {
    コンソール.log(res)
})

// process.env.NODE_ENV に応じて異なるベース URL を切り替えます
const isPro = process.env.NODE_ENV === 'production'
​
モジュール.エクスポート = {
    // 'apis': vue.config.js のプロキシによって設定されたプロキシ ベース URL: isPro ? 'http://192.168.100.120/ceds' : '/apis'
}

'axios' から axios をインポートします
'qs' から Qs をインポートします
'vue' から Vue をインポートします
import { getToken } from '@Utils/session.utils' // トークンファイルを保存して取得する import address from './address' // アドレスを要求する
クラスリクエスト{
    コンストラクタ（）{
        // axiosインスタンスを作成する this._axios = axios.create({
            ベースURL: アドレス.ベースURL、
            timeout: 1000 * 5, // リクエストタイムアウトヘッダー: {}
        })
        // リクエストインターセプション this._axios.interceptors.request.use(
            設定 => {
                constリクエストヘッダー = {
                    'X-リクエスト': 'XMLHttpRequest',
                    'コンテンツタイプ': 'application/json; 文字セット=UTF-8',
                    'アクセス制御許可オリジン': '*',
                    token: getToken() // リクエストヘッダーにトークンを追加する
                }
                config.headers = Object.assign(config.headers、リクエストヘッダー)
                設定を返す
            },
            エラー => {
                Promise.reject(エラー)
            }
        ）
    }
     
    // リクエスト メソッドに基づいて、パラメータをクエリに配置するか本文に配置するかを決定します。
    // 最も直感的な違いは、たとえば、GET リクエストでは URL にパラメータが含まれるのに対し、POST ではリクエスト ボディを通じてパラメータがボディ内に配置され、送信時のパラメータ形式が異なることです // 以下は、私がリクエスト メソッドで一般的に使用する 4 つのパラメータ形式です。これらは自分で調整できます。/**
      * GETリクエストを送信します * @param {String} URLアドレス * @param {Object} queryクエリパラメータ * @return jsonデータ */
    取得 (URL、クエリ = {}) {
        this._request('get')(url, { を返します。
            ...クエリ
        })
    }
    /**
      * 投稿リクエストを送信 * @param {String} URL アドレス * @param {Object} 本文クエリパラメータ * @return json データ */
    投稿(url, 本文 = {}, ヘッダー) {
        データを入力します。
        if (this.isFormData(body)) {
            データ = 本文
        } そうでない場合は、Array.isArray(body) となります。
            データ = 本文
        } それ以外 {
            データ = { ...本文 }
        }
        this._request('post')(url, headers)(url, data); を返します。
    }
    （URL、本文 = {}）を配置します{
        this._request('put')(url, { を返します。
            ...体
        });
    }
    削除(url, 本文 = {}) {
        this._request('delete')(url, { を返します。
            ...体
        });
    }
​
    isFormData = v => {
        Object.prototype.toString.call(v) === '[オブジェクト FormData]' を返します
    }
​
​
    /**
      * リクエストヘッダーを設定 * @param {Object} header リクエストヘッダー */
    setHeaders(ヘッダー) {
        Object.keys(ヘッダー).forEach(キー => {
            this._axios.defaults.headers[キー] = ヘッダー[キー]
        })
    }
​
    // リクエストヘッダーを処理する
    ハンドルヘッダー() {
        定数ヘッダー = {}
        ヘッダー['XMIME-TYPE'] = '3'
        ヘッダー['Content-Type'] = 'application/json; charset=UTF-8'
        リターンヘッダー
    }
​
    /**
      * リクエストを送信 * @param {String} method リクエストメソッドタイプ * @param headers
      * @returns {function(*=, *=):Promise<unknown>}
      * @プライベート
      */
    _request (メソッド、ヘッダー) {
        this.setHeaders(this.handleHeaders()) // 統合リクエストヘッダーを設定する if (headers) {
            this.setHeaders(headers) //カスタムリクエストヘッダー}
         
        戻り値 (URL、データ、タイムアウト) => {
            定数設定 = {
                URL、
                方法、
                タイムアウト: タイムアウト || this._axios.defaults.timeout
            } //リクエスト構成を構築
​
            // リクエストタイプを判定する get post
            const paramType = ['get', 'delete'].indexOf(method) !== -1 ? 'params' : 'data'
            config[パラメータタイプ] = データ
            //パラメータのシリアル化 config.paramsSerializer = params => {
                Qs.stringify(params, { arrayFormat: 'repeat' }); を返します。
            }
             
            新しい Promise を返します ((resolve, reject) => {
                // 実際のリクエストを送信し、権限を確認し、404やその他のステータスをチェックします
                this._axios
                    .request(設定)
                    .then(応答 => {
                        if (this.handleSuccessStatus(response.data.code, response.data)) {
                            レスポンスヘッダー['content-type'] !== 'text/plain; charset=urf-8'の場合{
                            解決する（
                                    // レスポンス結果の二次パッケージ化 Object.assign(
                                      {
                                          成功: 数値(response.data.code) === 200、
                                            データ: response.data.data、
                                            メッセージ: 応答データメッセージ
                                        },
                                       レスポンスデータ
                                    ）
                                ) // 返された結果を処理する } else {
                                解決(応答データ)
                            }
                        }
                    }, 応答 => {
                        // エラーコードを処理する if(response.response) {
                            const ステータスコード = response.response.status
                            this.handleErrorStatus(ステータスコード)
                        } それ以外 {
                          Vue.prototype.$message.error(レスポンス.message)
                        }
                        拒否(応答)
                    })
                    .catch(エラー => {
                        拒否(エラー)
                    })
                })
            }
        }
    }
​
    // リクエストは成功し、エラーコードが返されます // 具体的なステータスコードはバックエンド開発者と一致し、ステータスコードに応じて対応するプロンプトが表示されます // 以下はプロジェクトでの私の操作ですが、自分で調整して拡張できます handleSuccessStatus (code, data) {
        結果 = ''
        フラグを false にする
        スイッチ（コード）{
            ケース '20007':
                result = 'セカンダリ認証パスワードが見つかりませんでした! '
                フラグ = true
                壊す
            ケース '20008':
                result = 'セカンダリ認証パスワードが変更されていません。まずこれを変更してください。 '
                フラグ = true
                壊す
            ケース '20009':
                結果 = 'セカンダリ認証がまだ有効になっていません。管理者に問い合わせてください! '
                フラグ = true
                壊す
            ケース '90001':
                result = 'セカンダリ認証パスワードを入力してください! '
                フラグ = true
                壊す
            ケース '90002':
                result = '操作権限がありません! '
                フラグ = true
                壊す
            デフォルト：
                壊す
        }
​
        // 通知 // $message メソッドは、私がオンデマンドで導入した element-ui のプロンプト コンポーネントです。これを独自のプロンプト コンポーネントに置き換えることができます。if (result) {
            Vue.prototype.$message.error(結果)
        }
        リターンフラグ
    }
    // エラーコードに基づいてエラーメッセージを取得します。handleErrorStatus (statusCode) {
        errorMsg = '' とします
        ステータスコード === 500 の場合
            errorMsg = 'データ要求に失敗しました。管理者に連絡してください! '
        } それ以外の場合 (ステータスコード === 404) {
            errorMsg = 'リクエストアドレスエラー! '
        } それ以外の場合 (ステータスコード === 402) {
            errorMsg = '現在、このデータを操作する権限がありません。 '
        } それ以外 {
            errorMsg = 'リクエストエラー! '
        }
        // Vue.prototype.$message.error(errorMsg) に通知します。
    }
}
​
デフォルトの新しいリクエストをエクスポートする()

'../services/request' から http をインポートします
​
/**
 * @description ユーザーリストを取得* @param {*} params リクエストインターフェースのパラメータ*/
// ここで定義された reqUserList メソッドは、カプセル化されたリクエスト内の get メソッドを呼び出します。get メソッドの最初のパラメータはリクエスト アドレスで、2 番目のパラメータはクエリ パラメータです。 export const reqUserList = params => http.get('/user/list', params)

import { reqUserList } from '@Apis/user.api' // API をインポート
​
エクスポートデフォルト{
    名前: 'UserList',
    ……
    作成された() {
     
    },
    メソッド: {
        非同期getUsers() {
            //APIインターフェースを呼び出してパラメータを渡す const res = await reqUserList({
                ページ: 1,
                サイズ: 10
            })
            console.log(res) // 応答結果を取得する}
    }
}