在vue的开发中，涉及到很多接口。当项目足够大时，需要定义标准化和统一的接口。如何定义它们？

可能有多种方法。本文使用axios异步/等待进行统一接口管理

本文使用了由vue-cli生成的项目示例

例如

以segmentfault官网为简单例子，先看官网

看一下网站，把背景中给出的文件补上。如果背景不笨，给的文档一定要分模块。假设背景中给出的文档分为以下几个模块(假设，不要为真)

信息模块(我的订阅，热门信息)问答模块专栏模块讲堂模块圈子模块发现模块个人信息模块用户登录注册模块.还有许多其他模块。一般来说，一个网站的首页比较复杂，很多其他页面也会用到api，所以接口的统一管理可以实现api复用。

那么怎么做呢？

触控

1.首先，在src目录下创建一个新的文件夹，这里称为API，后台提供的所有接口都在这里定义

Cd src #切换到src目录mkdir apis #创建新的API文件2。第二步：根据后台文档划分的模块创建一个新的js文件。这里有一个简单的例子。

信息模块：info.js登录注册模块： member.js个人信息模块user_info.js.cd apis #切换到API目录touch info . js member . jsuser _ info . js #创建一个新的js文件。当前目录如下所示

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

在API下创建一个名为http.js的新文件夹，并在其中配置相应的axios

触摸http.js //新的http.js文件配置如下：

从' axios'/导入axios/创建axios的一个实例var instance=axios . create({ baseurl : xx，timeout : 6000 })////}，function (error) {//如何处理请求错误？返回Promise.reject(错误)；});//- 2.响应拦截器忽略实例。拦截器。回应。使用(function(response){ return response。数据；}，函数(错误){//对响应错误做点什么。返回Promise.reject(错误)；});导出默认函数(方法、url、数据=null) {方法=method . tolowercase()；if(方法==' post '){ return instance . post(URL，data) } else if(方法==' get '){ return instance . get(URL，{ params 3360 data })} else if(方法==' delete '){ return instance . delete(URL，{ params 3360 data })} else if(方法==' put') {returninstance。put (URL，数据)} else {console。错误('未知方法'方法)返回false }}配置：

引入axios并创建新的axios实例(axios的功能与axios实例相同)，请求拦截器响应拦截器并不是本文的重点，但跳过第30行代码和后面的内容才是重点。拿出来看看。/* * *导出默认值es6用于导出一个函数，导出的函数代替axios帮助我们请求数据。*函数的参数和返回值如下：* @param {String}方法请求的方法：get、post、delete、put * @param {String} url请求的url: * @param {Object}数据请求的参数* @returns {Promise}返回Promise对象实际上相当于axios请求数据的返回值*/exportdefaultfunction(方法、url、数据=null) {method=method。to lower case()；if(方法==' post '){ return instance . post(URL，data) } else if(方法==' get '){ return instance . get(URL，{ params 3360 data })} else if(方法==' delete '){ return instance . delete(URL，{ params 3360 data })} else if(方法==' put') {returninstance。put (URL，数据)} else {console。错误('未知方法'方法)返回false }}4。第四步：将http.js导出的函数引入到API下的js文件中，取其中一个

//member.js用于定义用户的登录、注册、注销等。从“”导入请求。/http . js '/Define interface//这里定义了一个登录接口，为组件公开了登录接口使用export const log in=Params=req(' post '，'/operator/login '，Params)//这里使用了arrow函数，所以改一下写法：//export const log in=function(req){//return req(' post '，'/operator/login '，Params)/}//定义注册接口export const reg=Params=req(' post '，'/operator/reg '，params)//Define第五步，

登录组件Login.js使用登录界面

//Login.vuetemplate div输入类型='text' v-modal='user.userId '输入类型=' text ' v-modal=' user . pass '/div/template script//1。从“”导入登录界面定义导入{login}././APIS/user . js ' export default { data(){ return { user 3360 { userid 3360 ' '，pass:''}}，Methods{ //2。定义login异步登录()的逻辑{//2.1a wiat log in(this . user)//等待登录(this。用户)完成执行。//将返回值赋予user _ infolet user _ info=wait log in(这。user)//2.2假设登录成功，返回的数据应该是//user _ info={code:200，msg3360' success '，data: {token3360 '