javascript-Angular2将服务方法从回调更改为异步
作者：互联网
我启动了一个简单的Angular2 Electron应用程序,并且有一种查询本地SQL Server数据库的服务方法.到目前为止一切正常.现在,我试图将服务数据库调用的结果发送到我的组件并以某种方式显示它.
问题在于查询逻辑是为回调语法编写的：
sql.query(sqlString, (err, result) => {
...
callback(result);
...
});
我很难重写它以返回诺言,因为结果总是在查询命令函数的result参数之内.我的组件看起来像这样：
export class LinkDocRetriever {
constructor(private myService: MyService) { }
results = "";
loadMyData(id: number): void {
let tcData = this.myService.getMyData();
tcData.forEach(element => {
this.results += element.FileName + " " + "....\n";
});
};
}
我的服务如下所示：
import { Injectable } from "@angular/core";
import * as sql from "mssql";
@Injectable()
export class MyService {
getMyData():Array<MyItem> {
let myData:Array<MyItem> = [];
let config = {
user: "sa",
password: "xxx",
server: "localhost",
database: "mydb"
};
const pool1 = new sql.ConnectionPool(config, err => {
if (err) {
console.log("connect erro: " + err);
}
let q:string = `SELECT TOP 10 * FROM MyTable;`;
let final = pool1.request()
.query<MyItem>(q, (err, result) => {
if (err) {
console.log("request err: " + err);
}
console.log("db result count: " + result.recordsets[0].length);
result.recordsets[0].forEach(row => {
myData.push(row);
});
});
});
return myData;
}
}
我确实得到了一个结果,但是该组件从未看到它,因为它在返回结果之前就回来了.
我尝试在ConnectionPool函数中的查询调用上进行等待,但是我收到一条错误消息,指出即使在该方法上设置了异步,也只能在异步函数中调用等待. mssql程序包有一个Async/ Await section,但是当我尝试该页面时,该页面上的给定语法给出了错误.
知道我如何使用诺言写这个吗？
解决方法:
如您所指出的,有3种处理异步功能的方法：使用回调,使用Promise和使用Async / Await.我将尝试显示所有三种方式,但是您应该了解javascript中的事件循环以及它如何处理异步功能.
打回来
从技术上讲,回调是处理异步函数的最快方法,但是起初它很令人困惑,如果使用不当,可能会创建称为回调地狱的东西.回调地狱非常可怕,甚至有人为它创建了一个网站http://callbackhell.com/.
因此,您的代码可以重写为：
export class LinkDocRetriever {
constructor(private myService: MyService) { }
results = "";
loadMyData(id: number): void {
// call getMyData with a function as argument. Typically, the function takes error as the first argument
this.myService.getMyData(function (error, tcData) {
if (error) {
// Do something
}
tcData.forEach(element => {
this.results += element.FileName + " " + "....\n";
});
});
};
}
服务
import { Injectable } from "@angular/core";
import * as sql from "mssql";
@Injectable()
export class MyService {
// Now getMyData takes a callback as an argument and returns nothing
getMyData(cb) {
let myData = [];
let config = {
user: "sa",
password: "xxx",
server: "localhost",
database: "mydb"
};
const pool1 = new sql.ConnectionPool(function(config, err) {
if (err) {
// Error occured, evoke callback
return cb(error);
}
let q:string = `SELECT TOP 10 * FROM MyTable;`;
let final = pool1.request()
.query<MyItem>(q, (err, result) => {
if (err) {
console.log("request err: " + err);
// Error occured, evoke callback
return cb(error);
}
console.log("db result count: " + result.recordsets[0].length);
result.recordsets[0].forEach(row => {
myData.push(row);
});
// Call the callback, no error occured no undefined comes first, then myData
cb(undefined, myData);
});
});
}
}
诺言
Promise是一个特殊的对象,它允许您控制异步函数并避免回调地狱,因为您不必使用嵌套的回调,而只需使用一个级别然后catch函数即可.阅读有关Promise here的更多信息
零件
export class LinkDocRetriever {
constructor(private myService: MyService) { }
results = "";
loadMyData(id: number): void {
this.myService.getMyData()
.then((tcData) => {
// Promise uses then function to control flow
tcData.forEach((element) => {
this.results += element.FileName + " " + "....\n";
});
})
.catch((error) => {
// Handle error here
});
};
}
服务
@Injectable()
export class MyService {
// Now getMyData doesn't take any argument at all and return a Promise
getMyData() {
let myData = [];
let config = {
user: "sa",
password: "xxx",
server: "localhost",
database: "mydb"
};
// This is what getMyData returns
return new Promise(function (resolve, reject) {
const pool1 = new sql.ConnectionPool((config, err) => {
if (err) {
// If error occurs, reject Promise
reject(err)
}
let q = `SELECT TOP 10 * FROM MyTable;`;
let final = pool1.request()
.query(q, (err, result) => {
if (err) {
// If error occurs, reject Promise
reject(err)
}
console.log("db result count: " + result.recordsets[0].length);
result.recordsets[0].forEach((row) => {
myData.push(row);
});
//
resolve(myData);
});
});
})
}
}
异步/等待
引入Async / await是为了解决您在处理回调和Promise时遇到的困惑.阅读有关async / await here的更多信息
零件
export class LinkDocRetriever {
constructor(private myService: MyService) { }
results = "";
// Look. loadMyData now has to have async keyword before to use await. Beware, now loadMyData will return a Promise.
async loadMyData(id) {
// By using await, syntax will look very familiar now
let tcData = await this.myService.getMyData(tcData);
tcData.forEach((element) => {
this.results += element.FileName + " " + "....\n";
});
};
}
服务将与Promise中的服务完全相同,因为Async / await是专门为处理它们而创建的.
注意：我从您的代码中删除了一些Typescript功能,因为我更习惯于香草JS,但是您应该能够编译它们,因为Typescript是JS的超集.
标签：angular,asynchronous,javascript,angular-promise 来源： https://codeday.me/bug/20191025/1931819.html