VUE API接口的统一管理

vue项目 对api进行封装统一管理

在日常vue项目中 或刚接收一个vue项目，如果项目足够大，就需要进行统一管理和规范接口了

1. js文件创建

先在src目录下新建一个api文件夹，然后在api文件夹下创建api.js 和 index.js

2. api.js 进行统一管理项目中的所有api

import axios from "axios";

// 登录接口
export const RequestLogin = params => {return axios.post(`/users/login`, params).then(res => res.data);};

// 获取执行集合
export const RequestSet = params => {return axios.get(`/testsuites`,params);};

// 定时任务查询
export const GetTiming = params => { return axios.get(`/jobs?skip=${params.skip}&limit=${params.limit}` ,params)}

// 定时任务添加
export const AddTiming = params => {return axios.post(`/jobs`, params)};

// 定时任务编辑查询
export const EditTiming_Get = params => {return axios.get(`/jobs/${params}`, params)};

// 定时任务编辑
export const EditTiming = params => {return axios.put(`/jobs`, params)};

// 定时任务删除
export const DelTiming = params => {return axios.delete(`/jobs/${params.id}`, params)};

3. index.js （输出API公外部调用）

import * as api from './api'

export default api 

4. 外部调用API

<script>
import {RequestSet,AddTiming,EditTiming,EditTiming_Get} from '../../../api/api'

export default{
    data(){
        
    },
    methods:{
        getSetList(){
            let data = {name:"",age:""}
            // 直接调用封装好的API
            RequestSet(data).then(res=>{
                console.log(res.data)
            })
        }
    }
}
</script>