JSのAjax、async, await




function getZipcode() {
    const ajax = new XMLHttpRequest();

    const uri = 'https://zipcloud.ibsnet.co.jp/api/search';
    
    const params = {
        zipcode: 3350021,
        callback: undefined,
        limit: undefined,
    }
    const urlSearchParam =  new URLSearchParams(params).toString();
    const zipcodeURL = uri + '?' + urlSearchParam;
    
    ajax.open('GET', zipcodeURL, true);
    
    ajax.onload = function(e){
        if(ajax.readyState === 4){
            if (ajax.status === 200) {
                // console.log(ajax.responseText);
                console.log('ajax onload');
            }
        }
    } 
    
    ajax.onerror = () => { };
    ajax.send(null);
}

function getZipcodePromise() {
    const promise = new Promise((resolve) => {
        getZipcode();
        resolve();
    });
    promise.then(() => {
        console.log('promise ajax処理完了')
    });
    return promise;
}

const getZipcodeAsync = async() => {
    await new Promise((resolve) => {
        getZipcode();
        resolve();
    });

    console.log('async ajax処理完了');
}

console.log('promise 処理開始');

getZipcodePromise();

console.log('promise 処理完了');

console.log('async 処理開始');

getZipcodeAsync();

console.log('async 処理完了');

この記事が気に入ったらサポートをしてみませんか?