Zur Organisation des API-bezogenen Codes des Vue-Projekts

Dieser Artikel beschreibt hauptsächlich die Organisationsmethode des Vue-Projekt-API-bezogenen Codes. Freunde in Not können sich darauf beziehen

Über die Organisationsmethode des Vue-Projekt-API-bezogenen Codes

Lesen Sie es Nachdem ich den Code von Kollegen im Projektteam heruntergeladen hatte, stellte ich fest, dass verschiedene Projekte unterschiedliche Organisationsversionen haben

Version 1:

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

Dies ist der Code in jedem API-Datei

// 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'

Nachteile dieser Methode:

1. Fügen Sie beim Hinzufügen einer Entschuldigung eine neue Methode hinzu

2. Bei Bedarf zum Aufrufen Jede Ausrede muss eingeführt werden

3. Nur ​​die URL und der Funktionsname unterscheiden sich in der API-Datei, die anderen sind gleich und sollten zusammen gepackt werden

4. Alle Schnittstellen müssen Funktion für Funktion angezeigt werden, bitte

Version 2:
Vereinheitlichen Sie die API einfach nicht zusammen und Hängen Sie Axios an das Vue-Objekt an. Schreiben Sie

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

nur dort, wo es benötigt wird. >

Es können nicht alle Schnittstellen angezeigt werden, was die globale Steuerung unpraktisch macht.
2. Version 3:

Nachteile:

// 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

Damit habe ich vorerst nicht gerechnet

//需要调用接口的js文件
this.$axios.post(this.$api.name1,params).then()

Vorteile:
Nur ​​erforderlich, wenn die URL geändert wird. Einen Ort ändern

Sie können alle Schnittstellen anzeigen an einem Ort
Verwandte Empfehlungen:

2. apicloud implementiert AJAX-Anfragen (Angehängter Code)

Detaillierte Erklärung von Verwenden der Canvas-Zeichen-API

Das obige ist der detaillierte Inhalt vonZur Organisation des API-bezogenen Codes des Vue-Projekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!