位置: IT常识 - 正文
vue 方法按照顺序执行(vue方法顺序执行)
发布时间：2024-01-07推荐整理分享vue 方法按照顺序执行(vue方法顺序执行)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue调整数组顺序,vue的排序,vue sort排序,vue如何控制组件按顺序输出,vue按顺序执行方法,vue按顺序执行方法,vue的排序,vue如何控制组件按顺序输出,内容如对您有帮助，希望把文章链接给更多的朋友！
在调用后台方法的时候，由于调用了多个方法，但是执行的时候并没有按照顺序执行，前端需要后台返回的数据，对数据进行页面展示，由于没有按照顺序执行，导致前台页面报错。解决办法采用new Promise单独执行每个方法，并返回resolve。以下是实现方法：
方式一：// 获取标签和绘制曲线数据
mainMethod() {
// 执行方法1
this.method1().then((val) => {
// 方法2
this.method2().then((val) => {
// 方法3
this.method3().then((val) => {
// 等待方法1、2、3 执行完成后执行方法“lastMethod”
this.lastMethod();
});
});
});
},
// 方法1
method1() {
return new Promise((resolve, reject) => {
// 调用后端接口getMethod1
getMethod1("CT01").then((response) => {
this.detail_method1 = response.data;
resolve( this.detail_method);
});
});
},
// 方法2
method2() {
return new Promise((resolve, reject) => {
// 调用后端接口getMethod2
getMethod2("CT02").then((response) => {
this.detail_method2= response.data;
resolve(this.detail_method2);
});
});
},
// 方法3
method3() {
return new Promise((resolve, reject) => {
// 调用后端接口getMethod3
getMethod3( "CT03").then((response) => {
this.detail_method3 = response.data;
resolve(this.detail_method3);
});
});
},
lastMethod() {
// 需要执行的方法内容
}
方式二：vue一个页面很多接口时，异步请求的优化 1.使用 Promise.all()Promise.all() 方法接收一个promise的iterable类型（注：Array，Map，Set都属于ES6的iterable类型）的输入，并且只返回一个Promise实例， 那个输入的所有promise的resolve回调的结果是一个数组。这个Promise的resolve回调执行是在所有输入的promise的resolve回调都结束，或者输入的iterable里没有promise了的时候。它的reject回调执行是，只要任何一个输入的promise的reject回调执行或者输入不合法的promise就会立即抛出错误，并且reject的是第一个抛出的错误信息
let p1 = new Promise((resolve, reject) => { getNumber() resolve('成功了p1') })
let p2 = new Promise((resolve, reject) => { getName() resolve('成功了p2') }) let p3 = new Promise((resolve, reject) => { setTimeout(resolve, 100, 'foo'); });
Promise.all([p1, p2, p3]).then((result) => { console.log(result) // ['成功了p1', '成功了p2', 'foo'] }).catch((error) => { })
Promise.all 在任意一个传入的 promise 失败时返回失败。例如，如果你传入的 promise中，有四个 promise 在一定的时间之后调用成功函数，有一个立即调用失败函数，那么 Promise.all 将立即变为失败。
var p1 = new Promise((resolve, reject) => { setTimeout(resolve, 1000, 'one'); }); var p2 = new Promise((resolve, reject) => { setTimeout(resolve, 2000, 'two'); }); var p3 = new Promise((resolve, reject) => { reject('reject'); });
Promise.all([p1, p2, p3]).then(values => { console.log(values); }).catch(reason => { console.log(reason) });
2.Promise.race(iterable) 方法返回一个 promise，一旦迭代器中的某个promise解决或拒绝，返回的 promise就会解决或拒绝。var p1 = new Promise(function(resolve, reject) { setTimeout(resolve, 500, "one"); }); var p2 = new Promise(function(resolve, reject) { setTimeout(resolve, 100, "two"); });
Promise.race([p1, p2]).then(function(value) { console.log(value); // "two" // 两个都完成，但 p2 更快 });
3.Promise.all()与Promise.race()请求时的区别Promise.all() 适合于后面的异步请求接口依赖前面的接口请求的数据时使用。 Promise.race() 没有先后顺序，那个先请求回来那个先显示
参考链接：
https://www.csdn.net/tags/MtTaEgzsNjAwMzY5LWJsb2cO0O0O.htmlhttps://www.csdn.net/tags/MtTaEgzsNjAwMzY5LWJsb2cO0O0O.html
下一篇：普利特维采湖群国家公园中的高架步道，克罗地亚 (© Alessandro Laporta/Offset by Shutterstock)(普利特维采湖群国家公园天气)
