方案1：在.then中执行代码
适用场景：访问接口后，执行的代码固定不变
getList() { this.$http({ method: "get", url: "http://127.0.0.1:4523/mock/430173/user/list", params: params, }).then((res) => { this.dataList = res.data.list; // 执行指定代码 console.log("搜索数据成功！"); }); },
缺点：
- 目标代码嵌套过深
- 访问接口的代码不便于复用
方案2：通过回调函数执行代码
将目标代码作为函数的参数传入
适用场景：访问接口后，不同触发条件需要执行不同的代码
优点：方便接口代码的封装复用
// 初始化 init() { let initSucInfo = () => { console.log("初始化数据成功！"); }; this.getList({}, initSucInfo); }, // 搜索 search() { let params = { name: "朝阳", }; let searchSucInfo = () => { console.log("搜索数据成功！"); }; this.getList(params, searchSucInfo); }, // 函数封装——访问接口成功后，执行传入的callBack函数 getList(params = {}, callBack) { this.$http({ method: "get", url: "http://127.0.0.1:4523/mock/430173/user/list", params: params, }).then((res) => { this.dataList = res.data.list; if (callBack) { // 执行对应的代码 callBack(); } }); },
方案3：使用async await Promise
优点：代码流程清晰，也方便接口代码的封装复用
要点：
- 使用await 的函数前需加async
- await 后需跟一个 Promise 对象（axios请求就是一个Promise 对象），所以范例代码中getList方法必须 return this.$http
- 若想await 返回接口获取的数据，需在接口的.then中
return Promise.resolve(res);
并定义一个变量，接收await 的返回值
let res = await this.getList(params);
目标代码中不使用接口返回的数据
// 搜索 async search() { let params = { name: "朝阳", }; await this.getList(params); // 执行目标代码 console.log("搜索数据成功！"); }, getList(params = {}) { return this.$http({ method: "get", url: "http://127.0.0.1:4523/mock/430173/user/list", params: params, }).then((res) => { this.dataList = res.data.list; console.log("访问接口成功！"); }); },
目标代码中使用接口返回的数据
// 搜索 async search() { let params = { name: "朝阳", }; let res = await this.getList(params); // 执行目标代码 console.log("接口返回的数据为：" + res); }, getList(params = {}) { return this.$http({ method: "get", url: "http://127.0.0.1:4523/mock/430173/user/list", params: params, }).then((res) => { this.dataList = res.data.list; console.log("访问接口成功！"); return Promise.resolve(res); }); },
