vue api统一管理

axios统一封装

// 此处不做详细解释, 需要代码的, 请联系我

Api统一管理

• 文件目录

├── src
    ├── api
    │   ├── index.js // 分发, 也可在模块js中直接分发
    │   ├── modelA.js // 按模块管理api
    │   └── modelB.js
    └── main

• 以模块 A 为例, 统一管理此模块的接口

// modelA.js
import axios from 'axios'

export const API_MODELA = {
    reqLogin: params => { return axios.post('/login', params).then(res => res.data) },
    
    reqProfile: params => { return axios.post('/user/profile', params).then(res => res.data) },
    
    reqUserList: params => { return axios.get('/user/list', { params: params }).then(res => res.data) }
}

• 需要掉接口的页面

import { API_MODELA } from '../../api/api';

let params = {
    username: 'admin',
    pwd: '123456'
}
API_MODELA.reqLogin(params).then((res) => {
	console.log(res)
})