Question

我正在使用axios.post方法从服务器中获取数据，但它会提早返回。我使用过async和await，但是数据未更新

apiService.js

[![import {Component, OnInit} from '@angular/core';
import {NgForm} from '@angular/forms';
import {Router} from '@angular/router';
import {UserService} from '../services/user.service';
import { AuthService } from '../services/auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: \['./login.component.scss'\]
})
export class LoginComponent implements OnInit {
  hide = true;
  name: string;
  password: any;
  errorMessage: string;

  constructor(
    private router: Router,
    private userService: UserService,
    private auth: AuthService
  ) { }

  ngOnInit() {
  }

  onSubmit(form: NgForm) {
    if (form.valid) {
      console.log(form.value);
      this.auth.sendToken(form.value);
      this.userService.loginPage(form.value).subscribe(
        (data: any) => {
          if (data) {
            console.log(data);
            // this.userService.updateLoginData(data.message);
            this.router.navigate(\['infohub'\]);
          } else {
            // this.errorMessage = data.message;
            console.log(data);
          }
        },
        err => {
          console.log(err);
        }
      );
    }
  }
}

component.js

export const  getAppAuthUser = async (page, authorizedType) => {

    await axios.post(APIURL.apiURL, JSON.stringify({
        page: page,
        authorized: authorizedType
    }), {
        headers: {

            'Content-Type': 'application/json'
        }
    }).then(res => {
        console.log(res);
        return res.data;
    }).catch(err => {
        console.log(err);
    });
}

当我控制台时，它会返回Promise {}

请帮助

Answer 1

这就是async函数的作用：它们返回承诺。 async/await的存在使使用Promise的语法更容易，但是它并没有改变Promise涉及的事实。要在Promise中获取值，您需要使用Promise的.then方法，或将代码放入异步函数中并等待其结果。

getAppAuthUser函数中还存在一个问题，即您未返回任何内容，因此Promise将解析为undefined。在将.then样式与async/await样式混合使用时，解决这类问题要容易得多。我强烈建议您选择一种样式并持续使用。

export const getAppAuthUser = async (page, authorizedType) => {
  try {
    const res = await axios.post(APIURL.apiURL, JSON.stringify({
      page: page,
      authorized: authorizedType
    }), {
      headers: {
        'Content-Type': 'application/json'
      }
    })
    console.log(res);
    return res.data;
  } catch (err) {
    console.log(err);
  }
}

import * as Users from '../api/apiService';
class User extends Component {
    sortedInfo = {};
    async componentDidMount() {
        this.data = await Users.getAppAuthUser(1,true);
        console.log(this.data);
    }
}

Answer 2

JavaScript是异步的，如果您希望像这样使用this.data=Users.getAppAuthUser(1,true)，那么我们就不能像这样async-await那样使用，然后像这样async componentDidMount() { this.data= await Users.getAppAuthUser(1,true); console.log(this.data); }那样使用Users.getAppAuthUser(1,true).then(data=>{ console.log(data); })

或者您可以使用ansible-playbook -i hosts test_iterate_win.yml -vvv这样的承诺

在Axios在reactjs中返回获取的数据之前，方法会提前返回

2 个答案: