Question

我使用以下代码获取函数：

var URL='...'

export function PostData(method,data){
    fetch(URL+method,{
        method:'POST',
        body:JSON.stringify(data),
        headers:{'Content-Type':'application/json'},

    }).then(res => res.json())
    .then(response => {
        var ret=JSON.stringify(response)
        return ret
    })
    .catch((error) => {
        console.error(error)
    })
}

并按如下所示使用它：

var retData=PostData('login/Authenticate',data)

retData 为空，但在功能 ret 中有数据

Answer 1

您的PostData函数当前不返回任何内容，因此为空。第一步是添加一个return语句：

export function PostData(method,data){
  return fetch(URL+method,{
    method:'POST',
    ...

这将使您的函数返回一个值，但不仅仅是一个简单的值，而是一个承诺！承诺不是最容易理解的，但是也有人试图解释它们。
-https://developers.google.com/web/fundamentals/primers/promises
-https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

现在您如何使用该值？

PostData('login/Authenticate',data)
.then(retData => {
  // ... use retData here
});

现在，您使用了react-native标签，所以我假设您想在render函数中使用此值。您不能简单地通过将PostData调用放入render函数中来做到这一点。您必须先将其置于状态，然后在render中使用该值：

state = { retData: null }

componentDidMount() {
  PostData('login/Authenticate',data)
  .then(retData => {
    // This puts the data in the state after the request is done
    this.setState({ retData: retData });
  });
}

render() {
  let retData = this.state.retData;
  // ... use retData in your render here, will be `null` by default

执行此操作的方法有很多不同或更简洁的方法，但我尝试使此答案尽可能简单明了：）

Answer 2

这是空的，因为对fetch的调用是异步的，并且在移至下一条语句时，原义字面被设置为undefined，因为尚未解析。解决它的一种方法是返回promise对象本身，然后在解析后使用.then获取响应。

var URL = '...'

export function PostData(method, data) {
  // return the promise object
  return fetch(URL + method, {
      method: 'POST',
      body: JSON.stringify(data),
      headers: {
        'Content-Type': 'application/json'
      },

    }).then(res => res.json())
    .then(response => {
      var ret = JSON.stringify(response)
      return ret
    })
    .catch((error) => {
      console.error(error)
    })
}

PostData('login/Authenticate',data).then(response => {
   // do something with the response
});

一种更清洁的方法是使用async/await ES7功能，使其更具可读性。

var URL = '...'

export function PostData(method, data) {
  // return the promise object
  return fetch(URL + method, {
      method: 'POST',
      body: JSON.stringify(data),
      headers: {
        'Content-Type': 'application/json'
      },

    }).then(res => res.json())
    .then(response => {
      var ret = JSON.stringify(response)
      return ret
    })
    .catch((error) => {
      console.error(error)
    })
}

async function getData() {
    let retData = await PostData('login/Authenticate',data);
}

从函数返回json数据

2 个答案: