Vue接口封装

接口三层封装：

工具函数层：

/**
 * axios请求的工具函数
 * 2019-11-13 by 小貂蝉
 */

// 引入核心库
import axios from 'axios'
import qs from 'qs'

// 引入ui组件
import { Message } from 'element-ui'

// 设置请求的服务器根路径
axios.defaults.baseURL = 'http://127.0.0.1:5000'
// 设置请求超时
axios.defaults.timeout = 3000;

// 设置请求拦截器（在请求发送出去之前 带上一些东西）
axios.interceptors.request.use(cofing => {
  return cofing;
}, err => Promise.reject(err))

// 设置响应拦截器 在接收到后端的响应结果以后 统一处理
axios.interceptors.response.use(response => {
  // 拦截数据  统一处理
  let { code, msg } = response.data;
  if (code === 0) {
    Message({ type: 'success', message: msg })
  }
  return response
}, err => Promise.reject(err))


// get和post请求
export default {
  get(url, params = {}) {
    return new Promise((resolve, reject) => {
      axios.get(url, { params })
        .then(response => {
          resolve(response.data) // 成功
        })
        .catch(err => {
          reject(err) // 失败
        })
    })
  },
  post(url, params = {}) {
    return new Promise((resolve, reject) => {
      axios.post(url, qs.stringify(params))
        .then(response => {
          resolve(response.data) // 成功
        })
        .catch(err => {
          reject(err) // 失败
        })
    })
  }
}

接口层

/**
 * 接口层，所有账号管理模块相关的请求函数 都在这里哦！！！
 */

// 引入工具函数
import req from '../utils/request'


/* 添加账号 */
export const addAccount = params => req.post('/users/accountadd', params)

/* 获取账号列表 */
export const getAccountList = params => req.get('/users/accountlist', params)

/* 删除账号 */
export const delAccount = params => req.get('/users/accountdel', params)

/* 批量删除账号 */
export const batchDelAccount = params => req.get('/users/accountbatchdel', params)

/* 修改账号 */
export const editAccount = params => req.post('/users/accountedit', params)