論vue項目api相關程式碼的組織方式

這篇文章主要是分享了關於vue專案api相關程式碼的組織方式，有需要的朋友可以參考一下

論vue專案api相關程式碼的組織方式

了下專案組同事的程式碼，發現不同專案有不同的組織版本

版本一：

├─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. 查看所有介面需一個一個函數去看,麻煩

版本二：
乾脆不把api統一到一起，把axios掛載到vue物件上只在需要的地方寫

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

這種方法缺點：

1. 如果修改url路徑,需要全域搜尋替換改動地方較多

2. 無法查看所有接口，不便於全域掌控

版本三:

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

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

缺點：

1. 暫時沒想到

優點:

1. 更改url時只需要改動一個地方

2. 可以在一個地方查看所有介面

相關推薦：

apicloud實作AJAX請求（附程式碼）

canvas的繪圖api使用詳解

#

以上是論vue項目api相關程式碼的組織方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！