vue中promise的使用及异步请求数据的方法(2)

问题： 通过这样的方法最终请求的数据是可以请求到的，但是顺序并没有按照我们预想的思路来执行，因为这样的执行方式会在getItemPromise执行之后就立即同时执行后面几个then，所以最终得到的顺序是不能确定的。

方法二：

// second method var somePromise = getItemPromise(items[0].id); for (let k = 1; k < items.length; k++) { somePromise = somePromise.then(function () { return getItemPromise(items[k].id); }); }

　这种方法的结构类似于下面这样：

getItemPromise(items[0].id) .then(function () { console.log("1", window.performance.now()); return getItemPromise(items[1].id); }) .then(function () { console.log("2", window.performance.now()); return getItemPromise(items[2].id); }) .then(function () { console.log("3", window.performance.now()); return getItemPromise(items[3].id); }) .then(function () { console.log("4", window.performance.now()); return getItemPromise(items[4].id); }) .then(function () { console.log("5", window.performance.now()); return getItemPromise(items[5].id); }) .then(function () { console.log("6", window.performance.now()); return getItemPromise(items[6].id); }) .then(function () { console.log("7", window.performance.now()); return getItemPromise(items[7].id); }) .then(function () { return getItemPromise(items[8].id); }) .then(function () { return getItemPromise(items[9].id); }) .then(function () { return getItemPromise(items[10].id); }) .then(function () { return getItemPromise(items[11].id); })

　　这样请求得到的顺序就是相同的了。 但是通过for循环，不论分类有多少，我们都可以请求到。

也就是说，通过链式调用的方式，即.then().then()这样才会在一个异步执行完之后执行下一个，值得注意。

下面看下vue 中promise 异步请求数据的方法

export function getTypes(type) { return listDictItems({ code: type }).then((res) => { if (res.code == 200) { let list = res.body; // console.log('list',list); return list; } }) };

组件中：

getTypes('EP_TYPE').then((data) => {console.log('data',data)});//成功

总结

以上所述是小编给大家介绍的vue中promise的使用及异步请求数据的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章: