no return from async operation in component

Question

I have the following code in Login component:

function auth(opts){
  return axios(opts).then(response => response.data)
}
auth(opts).then(data=> isLogged.set('assets'))

Main app:

$: currComponent = isLogged=='assets' ? Assets : null

<Login />
<svelte:component this={currComponent} />

By some reason Svelte doesn't wait until the promise get resolved.

However if I move isLogged.set('assets') outside of promise:

Api.auth(opts).then(data=> console.log(data))

isLogged.set('assets')

result of promise returned and component get mounted. What I'm doing wrong?

Olyno · Accepted Answer · 2020-03-27 10:09:45Z

1

Svelte will not wait the end of your promise to work and be mounted. It's good to note that Svelte doesn't detect a change on a variable when you are using a function or a method. You have to reassign them. So if we try to reproduce your code and fix it:

<script>

    import Login from './Login.svelte';
    import Assets from './Assets.svelte';

    let isLogged;

    $: currComponent = isLogged == 'assets' ? Assets : null;

    Api.auth(opts).then(data=> {
        isLogged = 'assets';
    })

</script>

<Login />
<svelte:component this={currComponent} />

Another option would be to use await block

answered Mar 27, 2020 at 10:09

Olyno

712 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user1552003 Over a year ago

As I understand - the only difference is that auth is called in App, no Login component. But if I'm using store in Login to pass isLogged to App (isLogged.set(..), why it isn't working?

Olyno Over a year ago

Svelte requires a reassignment to be reactive. When you asssign a variable using a method or a function, you don't reassign the variable, so it will not work.

user1552003 Over a year ago

But whats about promise resolving? it need to wrap the call into a function. But inside it the code seems don't work.

user1552003 Over a year ago

I meant that Svelte doesn't wait result of request if it was called inside a function: function(){ Api.auth(opts).then(data=> { isLogged = 'assets'; }) })()

Olyno Over a year ago

The other option that you can use is the await block

|

Collectives™ on Stack Overflow

no return from async operation in component

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related