javascript函数中的axios返回数据 [英] axios in javascript function to return data

问题描述

我在javascript中有2个文件.

I have 2 files in javascript.

一个:main_app.js

One: main_app.js

import * as API from "./api.js";

const pin = API.getPin();

console.log(pin);

其他是api.js

const baseUrl = "https://some.com/api";

export function getPin() {
  try {
    axios.post(baseUrl, { method: "pin" }).then((res) => console.log(res));
  } catch {
    console.log("Fail");
  }
}

在第一个文件中，我需要保存getPin()的输出，但是我总是得到Promise-在控制台中待处理.在axios调用和.then方法中，我可以console.log记录正确的数据，但是无论如何，我都无法返回数据.

In the first file I need to save the output of the getPin() but I always get Promise - pending in the console. In the axios call and .then method I can console.log the correct data but whatever I try I am not able to return the data.

我也尝试过异步，但无济于事.

I have also tried async and await with no avail.

export async function getPin() {
  try {
    const res = await axios.post(baseUrl, { method: "pin" }).then(res => res.data);

    return res.data;
  } catch {
    console.log("Fail");
  }
}

我尝试了es6中的类，但结果相同，然后认为我可能没有正确使用该类:

I have tried class from es6 but with the same result and then thought I am probably not using the class correctly:

export class Api {
  static baseUrl = "https://some.com/api";
  static response = null;

  static getPin() {
    const body = { method: "pin" };

    axios
      .post(this.baseUrl, body)
      .then((res) => (this.response = res.data))
      .catch((err) => console.error(err));
  }
}

我看了很多文章，我确信我遗漏了一些明显的东西，但是我却迷失了方向:-(任何帮助将不胜感激

I ve look at many articles and I am sure I am missing something obvious but I am losing my mind :-( Any help would be appreciated

并不是真正的重复，建议的问题.我重新做了课，看起来像这样

Not really a duplicate with suggested question.I have re-did the class and it looks like this

export default class API {
  static baseUrl = "https://some.com/api";
  static response = null;
  static pin = null;

  static getPin() {
    axios
      .post(this.baseUrl, { method: "pin" })
      .then((res) => (this.pin = res.data.pin));

    return this.pin;
  }
}

但这仍然无法按我的方式工作.请帮助

but this will STILL not working as I need.Help please

推荐答案

在axios上使用 async/await 模式时，不需要 .then . await axios.post 暂停执行代码，直到承诺被解决，并从API调用返回数据，从而允许 res.data 包含来自以下位置的响应:API.请参见下面的示例之一的修改版本:

When using the async/await pattern with axios, .then is not needed. The await axios.post pauses the execution of code until the promise is resolved and returns the data from the API call, and thus allows for res.data to contain the response from the API. See below for a modified version of one of your examples:

export async function getPin() {
  try {
    // instead of this line:
    // const res = await axios.post(baseUrl, { method: "pin" }).then(res => res.data);

    // try the following, notice the .then() removed
    const res = await axios.post(baseUrl, { method: "pin" });
    // res contains the response from the API call, no need to use .then. 
    
    // you may want to console.log(res.data) out here instead to see what you get back first. 

    return res.data;
  } catch(e) {
    console.log("error: ", e);
  }
}

在您的 main_app.js 中，您需要修改代码，因为 API.getPin()是异步API调用，这就是您得到承诺的原因.

In your main_app.js, you need to modify your code because API.getPin() is an asynchronous API call, that's why you're getting a promise.

import * as API from "./api.js";

let pinGlobal;
async function callAPIandSetPin() {
    // must be awaited because API.getPin() is asynchronous.
    const pin = await API.getPin();
    console.log(pin);

    // if you needed a global pin for whatever reason, you can modify it from here. 
    pinGlobal = pin;
}
callAPIandSetPin();

这篇关于javascript函数中的axios返回数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！