網站首頁 編程語言 正文
項目開發中用到了async/await，但遷移到另一個平臺時，由于該平臺的架構問題使得async/await失效（無法使用）。所以必須想一些方法來替代async/await的功能，即在攜帶請求的異步函數中實現相對同步的方法。
首先，我們得了解promise的一種使用場景：
function runAsync(){
var p = new Promise(function(resolve, reject){
//做一些異步操作
setTimeout(function(){
console.log('執行！');
resolve('數據');
}, 2000);
});
return p;
}
runAsync()
把異步操作放在promise里，并且包裝在一個函數中，讓該函數return出這個new出來的promise。
這樣，在執行該函數后，就會return出promise對象，從而可以操作promise對象的.then方法
runAsync().then(function(data){
console.log(data);
//這里的data，就是剛剛resolve('數據');括號里傳過來的東西
//后面可以用傳過來的數據做些其他操作
//......
});
是不是有點恍然大悟了呢？.then里獲取到的data就是promise里異步操作完成后的結果，而在.then里寫你在拿到data后需要執行的邏輯，不就解決了因異步拿不到數據的問題了嗎~
若我們在一個函數里存在兩個請求（異步操作）并且想讓他們順序執行，則可以憑借promise對象的鏈式操作完成：
runAsync1()
.then(function(data){
console.log(data);
return runAsync2();
})
.then(function(data){
console.log(data);
return runAsync3();
})
.then(function(data){
console.log(data);
});
runAsync1、runAsync2、runAsync3的函數內容為：
function runAsync1(){
var p = new Promise(function(resolve, reject){
//做一些異步操作
setTimeout(function(){
console.log('異步任務1執行！');
resolve('數據1');
}, 1000);
});
return p;
}
function runAsync2(){
var p = new Promise(function(resolve, reject){
//做一些異步操作
setTimeout(function(){
console.log('異步任務2執行！');
resolve('數據2');
}, 2000);
});
return p;
}
function runAsync3(){
var p = new Promise(function(resolve, reject){
//做一些異步操作
setTimeout(function(){
console.log('異步任務3執行！');
resolve('數據3');
}, 2000);
});
return p;
}
就是上面這樣，第一個異步操作之后執行第二個，第二個之后執行第三個，當然如果異步操作一樣的話，可以自己調用自己，也就是寫個遞歸，后面貼代碼
在then方法中，你也可以直接return數據而不是Promise對象，在后面的then中就可以接收到數據了，比如：
runAsync1()
.then(function(data){
console.log(data);
return runAsync2();
})
.then(function(data){
console.log(data);
return '直接返回數據'; //這里直接返回數據
})
.then(function(data){
console.log(data);
});
最后貼一下修改前和修改后的代碼，僅供參考：
修改前：
async getEnergyHouse(dataId) {
let self = this;
let datas = {
xdata: [],
data: [],
yAxisName: "",
legendData: [],
grid: {
left: "5%",
bottom: "13%",
right: "3%",
top: "13%",
},
};
let nodeIds = [];
let nodeidIsChi = [];
// 獲取nodeIds與子數組
await request.get("xxx", {
energyType: 1,
groupType: 1,
})
.then((res) => {
function getNodeids(arr) {
for (let item of arr) {
// 取到對應工廠
if (item.id === dataId) {
datas.yAxisName = item.name; // 圖表名稱用工廠名
self.houseTitle = item.name; // 修改title
if (item.children.length) {
item.children.forEach((chiItem) => {
datas.xdata.push(chiItem.name);
nodeIds.push(chiItem.id);
nodeidIsChi.push(chiItem.children.length); // 若nodeid對應的工廠子級為空，則點擊后報錯
});
}
break;
// 不是對應工廠
} else {
// 若子數組為空，則判斷下一組工廠數據
if (item.children.length) {
getNodeids(item.children); // 子數組不為空，則用其遞歸執行該函數
}
}
}
}
if (res.success) {
getNodeids(res.data);
self.nodeidIsChi = nodeidIsChi;
}
})
.catch(() => {
this.$Message.error("請求失敗");
self.loading = false;
});
self.loading = true;
let params = {
nodeType: "meterGroup",
dimensionType: "nature",
params: ["xxx"],
};
let paramsList = [
{
dimension: "hour",
startTime: moment()
.add(-1, "hour")
.add(-1, "hour")
.format("YYYY-MM-DD HH:mm:ss"),
name: "上小時",
type: "bar",
color: "#0058F4",
},
{
dimension: "day",
startTime: moment()
.add(-1, "day")
.add(-1, "hour")
.format("YYYY-MM-DD HH:mm:ss"),
name: "當日",
type: "bar",
color: "#00CAFF",
},
{
dimension: "month",
startTime: moment()
.add(-1, "month")
.add(-1, "hour")
.format("YYYY-MM-DD HH:mm:ss"),
name: "當月",
type: "line",
color: "#10AB8C",
},
{
dimension: "year",
startTime: moment()
.add(-1, "year")
.add(-1, "hour")
.format("YYYY-MM-DD HH:mm:ss"),
name: "當年",
type: "line",
color: "#F6B32F",
},
];
Promise.all(
paramsList.map((item) => {
return request.post("xxx", {
...params,
dimension: item.dimension,
startTime: item.startTime,
nodeIds,
endTime: moment().add(-1, "hour").format("YYYY-MM-DD HH:mm:ss"),
});
})
)
.then((reslist) => {
self.nodeIds = nodeIds;
self.clickTrue = true;
reslist.forEach((res, index) => {
if (res.success) {
let obj = { name: "", type: "", color: "", list: [] };
obj.name = paramsList[index].name;
obj.type = paramsList[index].type;
obj.color = paramsList[index].color;
res.data.list.forEach((item) => {
obj.list.push(item.ydata[1]);
});
datas.data.push(obj);
datas.legendData.push(obj.name);
}
});
self.loading = false;
self.chartDatas = datas;
})
.catch(() => {
self.clickTrue = true;
this.$Message.error("請求失敗");
self.loading = false;
});
}
修改后：
getEnergyHouse(dataId) {
let self = this;
let datas = {
xdata: [],
data: [],
yAxisName: "",
legend: [],
grid: {
left: "5%",
bottom: "13%",
right: "3%",
top: "13%",
},
};
let nodeIds = [];
let nodeidIsChi = [];
// 獲取nodeIds與子數組
function runAsync1() {
var p = request.get("xxxx", {
energyType: 1,
groupType: 1,
});
return p;
}
// 獲取圖表數據
function runAsync2(nodeIds) {
let params = {
nodeType: "meterGroup",
dimensionType: "nature",
params: ["xxx"],
};
let paramsList = [
{
dimension: "hour",
startTime: moment()
.add(-1, "hour")
.add(-1, "hour")
.format("YYYY-MM-DD HH:mm:ss"),
},
{
dimension: "day",
startTime: moment()
.add(-1, "day")
.add(-1, "hour")
.format("YYYY-MM-DD HH:mm:ss"),
},
{
dimension: "month",
startTime: moment()
.add(-1, "month")
.add(-1, "hour")
.format("YYYY-MM-DD HH:mm:ss"),
},
{
dimension: "year",
startTime: moment()
.add(-1, "year")
.add(-1, "hour")
.format("YYYY-MM-DD HH:mm:ss"),
},
];
var p = Promise.all(
paramsList.map((item) => {
return request.post("xxxxx", {
...params,
dimension: item.dimension,
startTime: item.startTime,
nodeIds,
endTime: moment().add(-1, "hour").format("YYYY-MM-DD HH:mm:ss"),
});
})
);
return p;
}
runAsync1()
.then((res) => {
function getNodeids(arr) {
for (let item of arr) {
// 取到對應工廠
if (item.id === dataId) {
datas.yAxisName = item.name; // 圖表名稱用工廠名
self.houseTitle = item.name; // 修改title
if (item.children.length) {
item.children.forEach((chiItem) => {
datas.xdata.push(chiItem.name);
nodeIds.push(chiItem.id);
nodeidIsChi.push(chiItem.children.length); // 若nodeid對應的工廠子級為空，則點擊后報錯
});
}
break;
// 不是對應工廠
} else {
// 若子數組為空，則判斷下一組工廠數據
if (item.children.length) {
getNodeids(item.children); // 子數組不為空，則用其遞歸執行該函數
}
}
}
}
if (res.success) {
getNodeids(res.data);
self.nodeidIsChi = nodeidIsChi;
self.loading = true;
}
return runAsync2(nodeIds);
})
.then((reslist) => {
self.nodeIds = nodeIds;
self.clickTrue = true;
let paramsList = [
{
name: "上小時",
type: "bar",
color: "#0058F4",
},
{
name: "當日",
type: "bar",
color: "#00CAFF",
},
{
name: "當月",
type: "line",
color: "#10AB8C",
},
{
name: "當年",
type: "line",
color: "#F6B32F",
},
];
reslist.forEach((res, index) => {
if (res.success) {
let obj = { name: "", type: "", color: "", list: [] };
obj.name = paramsList[index].name;
obj.type = paramsList[index].type;
obj.color = paramsList[index].color;
res.data.list.forEach((item) => {
obj.list.push(item.ydata[1]);
});
datas.data.push(obj);
datas.legend.push(obj.name);
}
});
self.loading = false;
self.chartDatas = datas;
})
.catch(() => {
self.clickTrue = true;
this.$Message.error("請求失敗");
self.loading = false;
});
},
THX~
原文鏈接：https://blog.csdn.net/vvv3171071/article/details/122370059
- 上一篇：沒有了
- 下一篇：沒有了
相關推薦
- 2022-06-29 Qt?Design?Studio創建工程的實現方法_C 語言
- 2022-07-12 修改docker官方鏡像內部內容并重新build鏡像
- 2022-08-04 GoFrame框架gset交差并補集使用實例_Golang
- 2022-09-02 C#中ftp檢測目錄是否存在和創建文件夾的實現_C#教程
- 2023-12-25 Spring中使用注解開發
- 2022-10-05 Python線程池的實現淺析_python
- 2022-06-16 golang?gorm實現get請求查詢案例測試_Golang
- 2022-11-02 利用Python+eval函數構建數學表達式計算器_python
- 欄目分類
-
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版（
- Linux 中運行的top命令 怎么退出？
- MySQL 中decimal 的用法？ 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符，流程控制 Flo
- 1. Int 和Integer 的區別，Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤：Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密？
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串（SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列，發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支
提供CDN加速