给路大人的一封信--------接口这个小东西

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

自我介绍：本人是个前端小白实习生，以下所有东西都是根据本人的经历所作，纯属原创，如有侵权，联系删除。如有错误的点，请各位大佬留言指正。

在我们开发的时候一直听见别人说调接口，调接口的，还有后端人员跟前端说 “你那个入参传错了” 遇见暴躁的后端大哥可能会直接怼 “你娘个得儿，你少传参数了，还说是我这的问题，你自己看看你都传的是啥。”

那接口是个什么东东呢？它有什么用呢？请随 欢囍 往下看。

---

提示：以下是本篇文章正文内容，下面案例仅供参考

一、接口是东西？是个什么东西？

个人理解：接口的作用就是，前端去传给后端特定的参数（这个参数要和后端规定好，比如名字用‘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文件是为了方便书写，提高代码的可维护性，美观性。
调接口：可以想象成七龙珠，入参就是我们要集齐的七颗龙珠，龙珠集齐可以许愿，我们参数集齐就可以调通后端的接口大门，取得里面的数据。