聊聊 Vue 中 axios 的封装

前言

金三银四，技术论坛上诸如：阿里、头条、腾讯….面经层出不穷，朋友圈很多小伙伴都在找工作也遇到了各种各样的麻烦。本文希望那些在准备面试的过程中蕉绿的童鞋别僵化了自己的思维，以自己曾经遇见到一道面试题为引，用自己对待问题的想法行文，天马行空，从僵硬的知识点中跳脱出来一起思考，内容简单易懂。评论区有很多的同学留下了许多很棒的思路，大家不要错过哟，欢迎大家一起继续交流学习。

题

const fucArr = [
	next => {
		setTimeout(() => {
			console.log(1);
			next()
		}, 300)
	},
	next => {
		setTimeout(() => {
			console.log(2);
			next()
		}, 200)
	},
	next => {
		setTimeout(() => {
			console.log(3);
			next()
		}, 100)
	}
]
var run = arr=>{
 
}
// 实现一个run方法,使得run(fucArr)能顺序输出1、2、3.
复制代码

题目简析

我们观察 fucArr 每一个子项都具有如下结构：

接收一个方法 next
有一个计时器，计时器回调方法体内对应着相应的输出
输出结束调用 next 方法。
他们的差异就是：计时器时间逐个减少。

直接循环调用 3 个方法肯定是不可取的。为了能按序输出，函数的执行过程应该是上一个函数 console 之后， 再执行下一个函数，而接收的这个 next参数就是执行下一个方法的关键。因为是头到尾依次调用，我们就把fucArr 称之为一个队列。

思路一、

我们假象自己是个编译器，然后把执行的过程进行单步拆解。

fucArr 是做先执行等待队列第一个，等待中的函数队列为原函数队列的slice(1)；
等待next执行后，然后又执行等待函数队列的第一个函数，等待中的函数队列为原函数队列的slice(1)；
听着是不是很像一个递归的过程，没错，那我们先用递归来实现一下

var run = arr => {
	// 递归语句千万条，找到出口第一条，那咱们判断递归出口的条件就是等待队列为空
	i