无法从异步函数获取返回值，等待未按预期工作（Vue API 服务）

Posted 2023-02-22

【中文标题】无法从异步函数获取返回值，等待未按预期工作（Vue API 服务）

【英文标题】：Unable to get return value from async function , await not working as expected (Vue API Service)

【发布时间】：2020-02-12 16:01:23

【问题描述】：

我正在尝试创建一个服务来与我的 API 进行通信，我对 async/await 不太熟悉，但我面临以下问题，根据我在文档中阅读的内容没有多大意义。

如果我尝试使用 await 从异步函数 (UserAuthService.login) 获取结果，它会给我一个错误提示： " 'await' 表达式只允许在异步函数中使用"

当我尝试获取结果时，组件登录中发生错误，如果登录功能是异步功能，“登录”功能可以正常工作，为什么我会收到此错误？我怎样才能得到异步函数的结果？

auth_user_service.ts：

const UserAuthService = 
  /**
     * Login the user and store the access token to TokenService.
     *
     * @returns success
    **/
  login: async function (email: string, password: string): Promise<boolean> 
    const requestData = 
      method: 'POST',
      url: 'auth/token/',
      header: 
        'X-Requested-With': 'XMLHttpRequest',
        'Content-Type': 'application/json;charset=UTF-8'
      ,
      data: 
        client_id: process.env.VUE_APP_APPLICATION_CLIENT_ID,
        client_secret: process.env.VUE_APP_APPLICATION_SECRET,
        grant_type: 'password',
        username: email,
        password: password,
        scope: 'read write'
      
    

    try 
      const response = await ApiService.customRequest(requestData) // just return axios(data);


      if (response.status == 200) 
        return true;
       else 
        return false;
      

     catch (error) 
      return false;
    
  ,

登录.vue：

<template>...</template>
<script lang="ts">

import  UserAuthService  from '../services/auth/auth_user.service'

export default 
    data: () => (
        form: 
            email: '',
            password: ''
        ,
    ),
    methods: 
        login():void 
            let success: boolean = await UserAuthService.login(this.form.email, this.form.password); //error here
            console.log(success)

        
     
;
</script>

tsconfig.json

  "compilerOptions": 
    "target": "esnext",
    "module": "esnext",
    "strict": false,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "typeRoots": [
      "node_modules/@types",
      "src/types"
    ],
    "types": [
      "webpack-env",
      "jest",
      "vuetify"
    ],
    "paths": 
      "@/*": [
        "src/*"
      ]
    ,
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  ,
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]

【问题讨论】：

您需要将login 组件方法设为异步函数，以便在其中使用await

@Phil 你是对的，非常感谢。我在 2 小时内被困在这个问题上......

@Phil 您使用的是哪个版本的 Vue 和 lint 程序？我正在将 vetur 用于可视代码，但对我来说有点不好。

【参考方案1】：

由于您在方法中使用await，因此您必须将其声明为async：

methods: 
    async login(): Promise<void>  // added async, changed return type
        let success: boolean = await UserAuthService.login(this.form.email, this.form.password);
        console.log(success)
    

还要注意，由于async 关键字，该方法现在返回Promise。由于您使用的是 TypeScript，因此您还必须将其返回类型从 void 更改为 Promise<void>。