在vue开发中，会涉及到很多接口的处理，当项目足够大时，就需要定义规范统一的接口，如何定义呢？
方法可能不只一种，本文使用axios+async/await进行接口的统一管理。
本文使用vue-cli生成的项目举例。
举例
拿segmentfault的官网简单举个例子，先看一下官网：
看下网站，脑补一下后台给出的文档，如果后台不傻的话给出的文档肯定分模块的，假设后台给出的文档分为了以下几个模块（假设的，不要较真哈）：
-
资讯模块 (我的订阅、热门资讯)
-
问答模块
-
专栏模块
-
讲堂模块
-
圈子模块
-
发现模块
-
个人信息模块
-
用户登录注册模块
-
...还有其他很多
一般来说，网站的首页都是复杂的，会用到很多其他页面也会用到api，所以接口统一管理可以做到api的复用：
那么如何做呢？
动手
1
首先，在src目录下新建一个文件夹，我这里叫apis，后台提供的所有接口都在这里定义：
cd src #切换到src目录
mkdir apis #新建apis文件
2
第二步，按照后台文档划分的模块新建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
3
第三步，需要引入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
}
}
配置简要说明一下：
/**
* 使用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
}
}
4
第四步，在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)
5.
第五步，在组件中使用接口。
登陆组件
Login
.
js
使用登录接口：
//Login.vue
input type='text' v-modal='user.userId'>
input type='text' v-modal='user.pass'>
div>
