VueプロジェクトのAPI関連コードの構成について

この記事は主にVueプロジェクトのAPI関連コードの整理方法を共有していますので、必要な友人は参考にしてください

VueプロジェクトのAPI関連コードの整理方法については

プロジェクトチームの同僚のコードを見てから、異なるプロジェクトがあることがわかりました 異なる組織バージョンがあります

バージョン 1:

├─apis
│      a.api.js
│      b.api.js
│      b.api.js
│      d.api.js

すべての API ファイルにはそのようなコードがあります

// d.api.js
import axios from '@/utils/http'

export function editUser (Param) {
    return axios.post('url1', {
        ...Param
    })
}
export function deleteUser (Param) {
    return axios.post('url2', {
        ...Param
    })
}
// 调用方式如下
import {editUser} from '@/apis/d.api.js'

このメソッドの欠点:

1. 言い訳を追加するときに新しいメソッドを追加します

2. 言い訳をする必要がある箇所はすべて導入する必要があります

3. API ファイル内の URL と関数名のみが異なり、他は同じであり、一緒にパッケージ化する必要があります

4. すべてのインターフェイスを表示するには、各関数を 1 つずつ確認する必要があり、面倒です

バージョン 2:
API を統一せず、axios を vue オブジェクトにマウントし、必要な場所にのみ記述するだけです

this.$axios.post(url,params).then()

この方法の欠点:

1. URL パスを変更する場合、グローバル検索が必要です 置換や変更の箇所がたくさんあります

2. すべてのインターフェースを表示できないため、全体的な制御に不便です

バージョン 3:

// apis/index.js
// 把所有api的url统一在一起并挂在到vue对象上
// 所有接口都在一个文件里会比较大
// 可以按功能模块分组编写
let ENV = {
    name1: 'url1', 
    // 用户相关接口
    name2: 'url2', 
    // 积分相关接口
    name3: 'url3',
    // 产品相关接口
    name4: 'url4', 
}
export default ENV

// src/main.js
import api from '@/apis/index.js'
Vue.prototype.$api = api

rree

短所:

1. まだ予想していませんでした

長所:

1. 変更 URL の 1 か所を変更するだけで済みます

2. すべてのインターフェイスを 1 か所で表示できます

関連する推奨事項:

apicloud は AJAX リクエストを実装します (コード付き)

キャンバス描画 API の使用法の詳細な説明

以上がVueプロジェクトのAPI関連コードの構成についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。