Angular2 将服务方法从回调更改为异步

Question

我启动了一个简单的 Angular2 Electron 应用程序，我有一个查询本地 SQL 服务器数据库的服务方法。到目前为止一切正常。现在我正在尝试获取服务数据库调用我的组件的结果并以某种方式显示它。

问题是查询逻辑多写回调语法：

sql.query(sqlString, (err, result) => {
    ...
    callback(result);
    ...
});

我很难将其重写为 return 承诺，因为结果将始终在查询命令函数的结果参数内。我的组件如下所示：

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;
    }
}

我确实得到了结果，但组件从未看到它，因为它在结果被 returned 之前返回。

我尝试在 ConnectionPool 函数内对查询调用执行 await，但我收到一条错误消息，指出 await 只能在异步函数内调用，即使我在该方法上设置了异步。 mssql 包有一个 Async/ Await section，但是当我尝试时，该页面上的给定语法会出错。

知道如何使用 promise 编写此代码吗？

Answer 1

正如您所指出的，有 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 是一个特殊的对象，它允许您控制异步函数并避免回调地狱，因为您不必使用嵌套回调而只使用一级 then 和 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

Async/await 的引入是为了解决您在处理回调和承诺时遇到的困惑。阅读更多关于 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 功能，因为我更习惯于 vanilla JS，但您应该能够编译它们，因为 Typescript 是 JS 的超集。

Angular2 将服务方法从回调更改为异步

Angular2 change service method from callback to Async

javascript

asynchronous

angular-promise

angular