Sur l'organisation du code lié à l'API du projet Vue

Cet article partage principalement la méthode d'organisation du code lié à l'API du projet Vue. Les amis dans le besoin peuvent s'y référer

Sur la méthode d'organisation du code lié à l'API du projet Vue

Lisez-le. Après avoir téléchargé le code des collègues de l'équipe de projet, j'ai constaté que différents projets ont des versions organisationnelles différentes

Version 1 :

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

Voici le code dans chaque fichier 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'

Inconvénients de cette méthode :

1. Ajouter une nouvelle méthode lors de l'ajout d'une excuse

2. Tout besoin pour appeler Chaque excuse doit être introduite

3. Seuls l'URL et le nom de la fonction dans le fichier API sont différents, les autres sont les mêmes et doivent être regroupés ensemble

4. Afficher Toutes les interfaces doivent être visualisées fonction par fonction, veuillez

Version 2 :
N'unifiez simplement pas l'API ensemble et monter axios sur l'objet vue Écrivez uniquement

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

là où c'est nécessaire >

Impossible d'afficher toutes les interfaces, ce qui rend le contrôle global peu pratique
2. Version 3 :

Inconvénients :

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

Je ne m'y attendais pas pour le moment

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

Avantages :
Nécessaire uniquement lors du changement d'URL Changer d'un endroit

Vous pouvez afficher toutes les interfaces en un seul endroit
Recommandations associées :

2. apicloud implémente les requêtes AJAX (code ci-joint)

Explication détaillée de en utilisant l'API de dessin sur toile

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!