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. 모든 인터페이스를 보려면, 각 함수를 하나씩 살펴봐야 하는데 귀찮습니다

버전 2:
단순히 API를 통합하지 않고 axios를 vue 개체에 마운트하고 필요한 곳에만 작성합니다.

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

이 방법의 단점:

1. URL 경로 수정시 글로벌 검색이 필요합니다 교체 및 변경하는 곳이 많습니다

2. 인터페이스 전체를 볼 수 없어 전체적인 제어가 불편합니다

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. 아직 예상하지 못했습니다

장점:

1. 변경 URL에서 한 곳만 변경하면 됩니다

2. 모든 인터페이스를 한 곳에서 볼 수 있습니다

관련 권장 사항:

apicloud는 AJAX 요청을 구현합니다(코드 포함)

캔버스 그리기 API 사용 자세한 설명

위 내용은 Vue 프로젝트 API 관련 코드 구성에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!