提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
自我介绍:本人是个前端小白实习生,以下所有东西都是根据本人的经历所作,纯属原创,如有侵权,联系删除。如有错误的点,请各位大佬留言指正。
在我们开发的时候一直听见别人说调接口,调接口的,还有后端人员跟前端说 “你那个入参传错了” 遇见暴躁的后端大哥可能会直接怼 “你娘个得儿,你少传参数了,还说是我这的问题,你自己看看你都传的是啥。”
那接口是个什么东东呢?它有什么用呢?请随 欢囍 往下看。
提示:以下是本篇文章正文内容,下面案例仅供参考
一、接口是东西?是个什么东西?
个人理解:接口的作用就是,前端去传给后端特定的参数(这个参数要和后端规定好,比如名字用‘name’,而不是‘mingzi’),然后 后端去校验入参的正确性,然后返回给前端相应的数据。
二、举个栗子吧~:
我们打开百度输入csdn,敲下回车。可以看到地址栏为https://www.baidu.com/s?tn=44004473_18_oem_dg&ie=utf-8&wd=csdn。
拆解下:scheme://host:port/path?query#fragment
scheme:为通信协议,比如http,https;
host:域名;
port:端口号,http默认端口号为80,https默认端口号为443;
path:路径,就是后端的接口文档上的接口。特点是由多个'/'隔开;
query: 查询的参数,也就是我们调用后端接口给后端所传的入参
(比如例子中的 wd=csdn,其中wd是字段名,这个前后端要统一规定,csdn就是字段值);
fragmeng:锚点;
例子当中的/s其实就是我们所说的接口,也是我们在开发中后端给前端提供的接口文档里的接口。tn,ie,wd是我们的请求参数也就是我们的入参。这些字段是前后端统一的,如果把其中的’wd’换成’www’,这样就会请求出错。
三、原来接口文档是这样用滴
1.后端接口文档-----例子
大部分的接口文档都是这种,首先说明这个接口的作用(添加客服的接口),然后指出路径path(/groupAdd/addPeople),其次就是调取接口需要的入参(前端需要给后端传的值)customerId,typeId,接着会有出参(后端返回给前端的数据)code,message,data。
2.如何去定义接口??(注意查看代码中的注释!!!很重要哦)
2.1在service文件夹中定义三个js文件:domain.js,path.js,index.js
domain.js :去定义特定的开发环境下的域名
path.js :去拼接好接口文档中的路径,
具体位置如下图所示:
domain.js文件(定义不同环境下的域名)
//domain.js
因为开发有不同的环境(测试,沙箱,测试等等)每个环境的域名可能不同,
于是需要定义不同环境下的域名,比如下例,
假如当前环境是测试环境'test',那么serveOne就是'//serveOne.xiaolu.cn',
如果当前是沙箱环境‘sandbox’,那么serveOne就是'//serveOne.xiaoliu.one.cn'.
const conf = {
'test': {
//测试环境
'serveOne': '//serveOne.xiaolu.cn',
'serveTwo': '//serveTwo.xiaolu.cn'
},
'sandbox': {
//沙箱环境
'serveOne': '//serveOne.xiaoliu.one.cn',
'serveTwo': '//serveTwo.xiaolu.one.cn'
},
'online': {
//线上环境
'serveOne': '//serveOne.xiaolu.com',
'serveTwo': '//serveTwo.xiaolu.one.com'
}
};
export default conf[process.env.VUE_APP_ENV || process.env.APP_NS];
//这里我们用export把conf暴露出去,方便我们在别的文件引入使用。
path.js文件(与domain.js文件结合,拼接出url)
import domain from './domain.js';//先引入domain.js文件!!!
export default {
'addPeople': `${domain.serveOne}/groupAdd/addPeople`, // 添加客服接口
};
这里拼接出url,用模板字符串``(反引号),其中domain.serveOne是之前在domain.js文件中定义好的。
/groupAdd/addPeople这个是后端给的接口文档中的路径path(参考上面的------后端接口文档-----例子)。
index.js文件(定义请求接口的函数)
import path from './path';
//首先引入path.js文件
const server = {
//新增客服---post请求
addPeoplePost(data) {
return axios.post(path.addPeople, { data })
},
//新增客服---get请求
addPeopleGet (data) {
return axios.get(path.addPeople, { params: { data } })
}
};
//把server导出去,方便别的文件引入使用
export default server;
这里首先把path.js文件导入,这样要取接口的话,直接path.***就可以拿到。然后定义一个server对象,在server对象里定义函数。值得一提的是get和post请求的写法是不同的,具体可以参考这里或者私信留言我哦~。
3.调取接口。
在需要调取接口的文件中引入index.js文件,一下调取接口以上述接口文档为例(假如上述是get请求)
import server from "../service/index";
然后在methods中写函数去调接口
methods:{
addPeopleFn(){
let params ={
customerId: '666',//目前是写死的,重点是举例
typeId:'888',//目前是写死的,重点是举例
}
server.addPeopleGet(params).then(res=>{
//这里是接口请求成功时的处理
}).catch({
//这里是接口请求失败的处理
})
}
}
到这里,调取接口的过程基本就结束了。
总结
把接口拆分成 domain.js , path.js, index.js文件是为了方便书写,提高代码的可维护性,美观性。
调接口:可以想象成七龙珠,入参就是我们要集齐的七颗龙珠,龙珠集齐可以许愿,我们参数集齐就可以调通后端的接口大门,取得里面的数据。