前端请求接口post_前端如何优雅地模拟接口请求？(给你的代码加点小意外)

前言：

作为一名前端开发程序猿，每天都被产品经理催着开发，项目一启动，产品就过来了。嘘寒问暖：大胸弟，你啥时开始做啊？一般我们都会直接告诉TA，你先找接口解决数据问题。

而我们也会经常遇见“巧妇难为无米之炊”的难题，难道我们离开后端数据就不能生存啦？最近忙于某个项目，也遇到了这事，那我是怎么去解决的叻？容我娓娓道来。

所谓天才第一步，XXX啥裤。开个玩笑，我们肯定是需要先搞清楚我们想干啥。只有明确了目标，才能减少走弯路。需求：

模拟发送请求
模拟数据回传
本地开发实现

这三步中，模拟发送请求，这个目标对于我们前端来说，它并不重要，后端是比较看重你给什么参数，我好还你啥数据。

所以我们前端要做好模拟数据回传，这样才能更好的跟后端去约定字段，数据结构相关的。有了数据，我们才能更好的去实现功能开发。

目标分析

模拟数据回传，标准的接口组成，由两部分组成：

数据结果
请求状态

说到这里，我就忍不住的打开了浏览器调试模式。我正大光明的瞄了眼知乎的请求，比如这个接口：

https://www.zhihu.com/api/v4/creator/apply

那我们到底本地怎么模拟数据了？

解决问题

到了最后一步，咱们猿类最关心的问题，你说你洋洋洒洒说了一大堆废话，你倒是上代码啊！（我等着ctrl+c, ctrl+v 讷。我不创造代码，我只是代码的搬运工。）

废话就不扯那个淡，首先最直接方法，固定写好。

const result = {creator_status: 1entrance_msg: ""level: 1notification: {apply_pass: 0}status: 2
}

有人说，这个我也会，我还会给他加个 setTimeout 函数，更加像：

setTimeout(() => {this.setState({...result,})
}, 2000)

嘿，突然发现自己是个天才，简直跟接口回调一毛一样。

喂，醒醒....咋能不能有点追求。

哦，是不是嫌数据少了，我再复制几次。

low，咱能不能对自己要求高一点。

我们应该让数据更加可变，并且还可以模拟异步调用。所以，我们来改造一下。

首先用 js 实现一个概率函数，对，就是那个随机抽奖函数。网上随手找了一个：

random = (targetArr, probArr) => {let sum = 0,factor = 0,random = Math.random();for (let i in probArr) {sum += probArr[i];}random *= sum;for (let i in probArr) {factor += probArr[i];if (random <= factor) {return targetArr[i];}}return null;}

这个简单，不就是把这个随机函数加到数据上去就好啦。

low, 咱能不能再高级点，好歹也是前端高级猿类。

我们可以这样：(还可以刺激地加点错误数据，吃不吃鸡，意不意外，惊不惊喜。翻译翻译，啥叫惊喜，来，咱看一看。)

getResult = () => {return {creator_status: this.random([1, 2, 3, 4], [0.2, 0.2, 0.1, 0.5]),entrance_msg: this.random(['', void 0, '恭喜你中奖啦！', 'null'], [0.4, 0.1, 0.3, 0.2]),level: this.random([1,2], [0.5, 0.5]),notification: this.random([{apply_pass: this.random([0, 1], [0.2, 0.8])}, {}], [0.6, 0.4])}
}fetchData = (size) => {return new Promise((resolve, reject) => {const randTime = Math.random() * 2;const status = this.random([0, 1, 2], [0.2, 0.2, 0.6]);setTimeout(() => {if (status < 2) {reject({status,dataList: [],});} else {resolve({status,dataList: [...Array(size)].map(i => this.getResult()),});}}, randTime * 1000);});
}

这样就大功告成啦！完美收官，看看结果把：

fetchData(5).then(res => console.log(JSON.stringify(res, '', 4))).catch(e => console.warn(e))
// 输出结果
{"dataList": [{"creator_status": 3,"entrance_msg": "null","level": 1,"notification": {"apply_pass": 1}},{"creator_status": 4,"entrance_msg": "","level": 1,"notification": {}},{"creator_status": 1,"entrance_msg": "恭喜你中奖啦！","level": 1,"notification": {}},{"creator_status": 2,"entrance_msg": "null","level": 2,"notification": {}},{"creator_status": 4,"entrance_msg": "恭喜你中奖啦！","level": 2,"notification": {"apply_pass": 1}}],"status": 2
}