React-Native：如何在另一个类中获取API调用的回调

Question

I am calling a web service

Here is my code:

var result;
export function callPostApi(urlStr, params)
{
       fetch(urlStr, {method: "POST", headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(params)})
            .then((response) => response.json())
            .then((responseData) => {
              result = JSON.stringify(responseData)
             })
            .catch((error) => { console.error(error);

             Alert.alert('Alert Title failure' + JSON.stringify(error))
            })
            .done();
          return result
}

I am calling from here:

callapi(){
     var dict = {
          email: 'at@gmail.com',
          password: '123456',
        }
    result = callPostApi('http://demo.com', dict)
}

Currently, it is calling in Async mode that we want but code is written below this method getting execute immediately after calling of above method

i want callback when result from sever has received so that i can execute code written below the above method is execute after receiving response from server.

Answer 1

You need to use Promises.

Change your callPostApi function to return a Promise, then you can chain additional then , catch and finally calls.

export function callPostApi(urlStr, params) {
    return fetch(urlStr, {
            method: "POST", 
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(params)
        })
        .then((response) => response.json())
        .then((responseData) => {
            result = JSON.stringify(responseData)
        })
        .catch((error) => { 
            console.error(error);
            Alert.alert('Alert Title failure' + JSON.stringify(error))
        });
}


callapi() {
    callPostApi('http://demo.com', {
            email: 'at@gmail.com',
            password: '123456',
        })
        .then((response) => {
            // Continue your code here...
        });
}