在vue开发中，会涉及到很多接口的处理，当项目足够大时，就需要定义规范统一的接口，如何定义呢？
方法可能不只一种，本文使用axios+async/await进行接口的统一管理。

一般来说，网站的首页都是复杂的，会用到很多其他页面也会用到api，所以接口统一管理可以做到api的复用：

首先，在src目录下新建一个文件夹，我这里叫apis，后台提供的所有接口都在这里定义：

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

第二步，按照后台文档划分的模块新建js文件,这里简单举个例子：

资讯模块： info.js
登录注册模块: member.js
个人信息模块 user_info.js
....
cd apis # 切换到apis目录
touch info.js member.js user_info.js # 新建js文件
现在的目录大概是这个样子：
src
apis
info.js
member.js
user_info.js
main.js

第三步，需要引入axios做相应的配置。

在apis下新建一个文件夹，叫http.js，在里面做axios相应的配置。
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        }    }

配置简要说明一下：
引入axios，新建了个axios的实例（axios的实例的axios的功能一样）。
请求拦截器响应拦截器不是本文重点，略过。
第30行代码及以后是重点。

第四步，在apis下面的js文件中引入 http.js导出的函数，拿其中一个文件 member.js说明：

//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)//}//定义注册接口export const REG = params = >req('post', '/operator/reg', params)//定义注销接口export const LOGOUT = params = >req('post', '/operator/logout', params)

第五步，在组件中使用接口。

登陆组件 Login.js使用登录接口：

//Login.vue< template ><div ><input type = 'text'v - model = 'user.userId' ><input type = 'text'v - model = 'user.pass' ></div></template ><script >//1. 引入登录的接口定义import {LOGIN} from '../../apis/user.js'export default {        data() {            return{                user:{                    userId:'',                    pass: ''                }            }        },        methods {            //2. 定义登录的逻辑            async login() {                //2.1 awiat LOGIN(this.user)                //等待LOGIN(this.user)执行完,                //把返回值给user_info                let user_info = await LOGIN(this.user)                //2.2假设登录成功,返回的数据应该是                //user_info={code:200,msg:'success',data:{token:'xxxxx'}}                //然后根据返回的数据做相应的处理，比如储存token            }        },        mounted() {            //3. 执行登录            this.login()        }    }    < /script>

这样定义接口虽然看起来麻烦点，但有以下几个好处：
代码看起来规范，所有的接口都在一个文件夹定义，不用分散的各个组件，维护起来简单，例如后台的一些url变了，改起来也方便。
可以做到接口一次定义，到处使用。
例如首页使用了很多api：

//index.js  首页的js文件
import {GET_USER_INFO} from  'apis/user_info.js'  //用户信息
import {GET_CURRENT_INFO,GET_HOT_INFO} from 'apis/info.js'   //热门资讯 最新资讯
import {GET_HOT_LECTRUE} from 'apis/lectrue.js'   //讲座推荐
用户界面也会用到用户信息api：
//user_info.js用户信息页面
import {GET_USER_INFO} from 'apis/user_info.js'    //用户信息