On the organization method of Vue project API related code

This article mainly shares the organization method of the vue project api related code. Friends in need can refer to it

On the organization method of the vue project api related code

Read After downloading the code of colleagues in the project team, I found that different projects have different organizational versions

Version 1:

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

Every api file has such code

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

Disadvantages of this method:

1. When you add an excuse, add a new method

2. Anywhere that needs to call an excuse Need to be imported

3. Only the url and function name in the api file are different, the others are the same and should be packaged together

4. You need one to view all interfaces It’s troublesome to look at a function

Version 2:
Just don’t unify the API together, mount axios to the vue object only when needed Write

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

in the place. Disadvantages of this method:

1. If you modify the url path, you need to globally search and replace many places to change

2. Unable to view all interfaces, inconvenient for global control

##Version 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

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

1. I didn’t expect it for the time being

1. When changing the url, you only need to change one place

2. You can view all interfaces in one place

apicloud implements AJAX requests (with code)

Canvas drawing api usage details

The above is the detailed content of On the organization method of Vue project API related code. For more information, please follow other related articles on the PHP Chinese website!