Vue.js中关于接口请求的优雅处理

1. 传统的处理方式

// 首先引入接口
import { getList, getA, getB  } from "@/api/activityList/index.js";

getList(params).then((res) => {
	if(res.code == 200){
		// do something
		return;
	}
	// 异常抛出
	this.$message.error(res.message);
})

• 这样处理是没问题的，正常操作，但是也有可以改进的地方：
  1. 层级嵌套多一级。
  2. 如果在此接口之后还需要请求多个接口，且必须保证是顺序执行的情况（其他接口需要拿到此接口返回的数据再进行调用）。
  3. 那就只能一直在 .then() 里面嵌套，如下：

import { getList, getA, getB  } from "@/api/activityList/index.js";

getList(params).then((res) => {
	if(res.code == 200){
		// 获取到 res里面的数据 res.data
		getA(res.data).then((resA) => {
			// do something
			if(resA.code == 200){
				getB(resA.data).then((resB) => {
					// do something
				})
			}
			return;
			// 异常抛出
			this.$message.error(res.message);
		})
		return;
	}
	// 异常抛出
	this.$message.error(res.message);
})

• 这一看就不太优雅了，若是脾气不好的诸君接手此代码，必先骂之先祖，辱其老母，实乃有辱斯文也。
• 稍稍改造一下：

2. async，await改造

• 这里用完整的代码，方便大家能看懂：

import { getList, getA, getB  } from "@/api/activityList/index.js";
async getListFn() {
	// 将返回的参数往外提一层
	const { code, data, message } = await getList(params);
	if(code == 200) {
		// 其它接口请求
		await getA(data);
		// 当然也是可以拿到值的 
		// let data2 = await getA(data);
		await getB(data);
		// 赋值的层级也是很简洁的
		this.tableData = data.list;
	}
	return;
	// 异常处理
	this.$message.error(message);
}

• 上下两段代码对比还是很明显的，层级越少，对于后期维护就越简单。

1. 希望本文能对大家有所帮助，如有错误，敬请指出
2. 原创不易，还请各位客官动动发财的小手支持一波（关注、评论、点赞、收藏）
3. 拜谢各位！后续将继续奉献优质好文
4. 如果存在疑问，可以私信我(文底有V)