vue 项目接口管理的实现

cd src #切换到src目录
mkdir apis #新建apis文件

cd apis #切换到apis目录
touch info.js member.js user_info.js #新建js文件

src
  apis
    info.js
    member.js
    user_info.js
  main.js

touch http.js //新建http.js文件

import axios from 'axios'

//创建axios的一个实例 
var instance = axios.create({
  baseURL:xxx,
  timeout: 6000
})


//------------------- 一、请求拦截器 忽略
instance.interceptors.request.use(function (config) {

  return config;
}, function (error) {
  // 对请求错误做些什么
  
  return Promise.reject(error);
});

//----------------- 二、响应拦截器 忽略
instance.interceptors.response.use(function (response) {
  
  return response.data;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});


export default function (method, url, data = null) {
  method = method.toLowerCase();
  if (method == 'post') {
    return instance.post(url, data)
  } else if (method == 'get') {
    return instance.get(url, { params: data })
  } else if (method == 'delete') {
    return instance.delete(url, { params: data })
  }else if(method == 'put'){
    return instance.put(url,data)
  }else{
    console.error('未知的method'+method)
    return false
  }
}

/
  使用es6的export default导出了一个函数，导出的函数代替axios去帮我们请求数据，
  函数的参数及返回值如下
  @param {String} method 请求的方法get、post、delete、put
  @param {String} url   请求的url:
  @param {Object} data  请求的参数
  @returns {Promise}   返回一个promise对象，其实就相当于axios请求数据的返回值
 /
export default function (method, url, data = null) {
  method = method.toLowerCase();
  if (method == 'post') {
    return instance.post(url, data)
  } else if (method == 'get') {
    return instance.get(url, { params: data })
  } else if (method == 'delete') {
    return instance.delete(url, { params: data })
  }else if(method == 'put'){
    return instance.put(url,data)
  }else{
    console.error('未知的method'+method)
    return false
  }
}

//member.js 用于定义用户的登录、注册、注销等

import req from './http.js'

//定义接口 

//在这里定义了一个登陆的接口，把登陆的接口暴露出去给组件使用
export const LOGIN =params=>req('post','/operator/login',params)
//这里使用了箭头函数，转换一下写法
//export const LOGIN=function(req){
//  return req('post','/operator/login',params)
/