yield is a reserved keyword error inside async function

Question

I need to use window.chrome.storage to get the user email from the chrome storage and check if that email matches with the user logged in email from the response.data.email. if it matches, then dispatch success function else error. However, I am getting an error of 'yield is a reserved keyword'. How do i then make it work?

here is what i have done

function* setSessionAndLogin(response, headers, successCB, failureCB) {
    if (response.data) {
        const sessionValue = Array.from(headers.entries()).reduce(
            (val, entry) => ({ ...val, [entry[0]]: entry[1] }),
            {}
        );

    // const results = yield call(() => {})
    window.chrome.storage.sync.get(['user_email'], result => {
      if (response.data.email === result.user_email) {
        yield put(successCB(response.data));
        window.chrome.storage.sync.set(
                { user_token: btoa(JSON.stringify(sessionValue)) },
                function() {}
            );
      } else {
            yield put(failureCB('Email does not match'));
        }
    });

    } else {
        yield put(failureCB(response.errors[0]));
    }
}

UPDATE

Solutions i tried

solution 1.

Here nothing happens. I don't get error but also console.log('result', result, result.user_email); does not prints anything in the console.

function* setSessionAndLogin(response, headers, successCB, failureCB) {
    if (response.data) {
        const sessionValue = Array.from(headers.entries()).reduce(
            (val, entry) => ({ ...val, [entry[0]]: entry[1] }),
            {}
        );
        window.chrome.storage.sync.get(['user_email'], function*(result) {
            console.log('result', result, result.user_email);
            if (result.user_email && response.data.email === result.user_email) {
                yield put(successCB(response.data));
                window.chrome.storage.sync.set(
                    { user_token: btoa(JSON.stringify(sessionValue)) },
                    function() {}
                );
            } else {
                yield put(failureCB('Email does not match'));
            }
        });
    } else {
        console.log('error');
        yield put(failureCB(response.errors[0]));
    }
}

solution 2

const results = yield call(fetchUserEmail)
async function fetchUserEmail() {
    let userEmail = [];
    const email = await window.chrome.storage.sync.get(['user_email'], result => {
        userEmail.push(result.user_email);
        console.log('userEmail', userEmail);
    });

    return userEmail;
}

here i get empty array.

Answer 1

I solved this using promise. If async operation has to be carried inside generator, one option you can do is the following way.

call the function using yield call(fetchUserEmail) . This is a bit readable and organized way to do in some extent. I do not know about async/await so the answer in async/await is highly appreciated. Solution in different ways gives different idea to solve the problem and thus increases the knowledge on various domain.

function fetchUserEmail() {
    return new Promise((resolve, reject) => {
        let userEmail = [];
        window.chrome.storage.sync.get(['user_email'], result => {
            userEmail.push(result.user_email);
            resolve(userEmail);
        });
    });
}