如何处理来自useEffect的异步调用

时间:2020-02-27 11:23:32

标签: javascript reactjs axios

我正在从useEffect进行函数调用,该函数存在于另一个类中。从该函数中,我正在调用另一个异步函数,以在答应被解决后进行ajax调用,我对API调用返回的数据执行一些操作,然后将数据返回到useEffect函数首先被调用。我在useEffect中不确定。这是代码段

    // In Main Class
    let newObj=new ABC();
    useEffect(()=>{


    let flag= newObj.method1(url); //method present in another class.
    setFlag(flag)

    });

    // Inside Class ABC

    let flag;

    method1(url){

    this.method2(url).then(function(result) {

        /*some operation */
        flag=true;   //set to true based on data
        console.log(flag)//prints true
       }
      return flag // console log will print false here.
    }

    async method2(url){

      let data=await axios.get(url);
      return data;
    }

基于API调用,我试图在主类中获得的最终结果是对/错,我希望所有逻辑都出现在ABC类中。

2 个答案:

答案 0 :(得分:2)

您需要使您的method1能够返回promise,当前它正在返回正常值而不是promise,因此您将无法定义。使您的函数如下所示。

<a id="hlnkDelete" href='javascript:deleteRecord(@item.ID)' data-id='@item.ID' title="delete record" class="text-red"><i class="fa fa-trash"></i></a>

并更改父函数,如

//add below in Manifest file  
 <provider
            android:name="androidx.core.content.FileProvider"
            android:authorities="${applicationId}.provider"
            android:exported="false"
            android:grantUriPermissions="true">
            <meta-data
                android:name="android.support.FILE_PROVIDER_PATHS"
                android:resource="@xml/file_paths"/>
        </provider>

// create xml folder inside file name file_paths.xml

<?xml version="1.0" encoding="utf-8"?>
<paths xmlns:android="http://schemas.android.com/apk/res/android">
    <!--  -->
    <external-path
        name="my_images"
        path="data/data/com.cw.getmycolor/cache" />
    <external-path
        name="my_images"
        path="Android/data/com.cw.getmycolor/files/Pictures" />

    <external-path
        name="external"
        path="." />
    <external-files-path
        name="external_files"
        path="." />
    <cache-path
        name="cache"
        path="." />
    <external-cache-path
        name="external_cache"
        path="." />
    <files-path
        name="files"
        path="." />
    <external-path
        name="share"
        path="/" />

</paths>

// send method email

    private void shareApp() {
            Intent emailIntent = new Intent(android.content.Intent.ACTION_SEND);
            emailIntent.setType("application/image");
            emailIntent.putExtra(android.content.Intent.EXTRA_EMAIL,"demo@gmail.com");

    emailIntent.putExtra(Intent.EXTRA_STREAM, FileProvider.getUriForFile(this, BuildConfig.APPLICATION_ID + ".provider", new 

    File(uri.getPath())));/*getImageContentUri(this,new File(uri.getPath())));*/
            emailIntent.addFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION);
            emailIntent.addFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION);
            emailIntent.addFlags(Intent.FLAG_GRANT_WRITE_URI_PERMISSION);
            startActivityForResult(Intent.createChooser(emailIntent, "Send mail..."), 201);

        }

答案 1 :(得分:0)

useEffect(() => {
    // Instead of using async at useEffect( async () => {})  Create a scoped async function in the hook
    async function asynchronusFunction() {
      await myFunction();
    }
    asynchronousFunction(); // call the above defined function now.
  }, []);

您可以像上面的方法一样创建一个异步函数调用,并使用await等待该函数被执行。使用异步功能意味着您正在返回承诺。 React不等待承诺:https://github.com/facebook/react/issues/1739