약속 체인이 해결되지 않습니다. 수정하는 올바른 방법은 무엇입니까?

debugcn 에 게시 Dev

PaulProgrammer

롤업을 사용하여 내 페이지에 대한 웹 번들을 빌드하고 있습니다. 잘 작동하는 하나의 promise 체인이 있지만 실행되지 않는 맵을로드하려는 다른 하나가 있습니다.

중단 점을 넣었고 마지막 줄 p().then((m)=>console.log)및 에서 중단을 볼 수 Q.spread(...)있지만 다른 약속 된 메서드는 실행되지 않습니다.

약속을 강제로 해결하지 못하는 이유는 무엇입니까?

내 코드는 다음과 같습니다.

'use strict';

import Q from 'q';
import GoogleMapsApiLoader from 'google-maps-api-loader';

var getPositionIP = function() {
    return new Q( (res,rej) => {
        let oReq = new XMLHttpRequest();
        oReq.onload = function (e) {
            let loc = { coords: e };
            res(loc);
        }
        oReq.open("GET","https://json.geoiplookup.io/");
        oReq.responseType = "json";
        oreq.send();
    });
};

var getPositionGPS = function(options) {
    return new Q( function(resolve, reject) {
        if( navigator.geolocation ) {
            navigator.geolocation.getCurrentPosition(resolve,reject,options);
        } else {
            reject();
        }
    });
};

let mapEngine = GoogleMapsApiLoader({
    libraries: [],
    apiKey: '<<google maps key>>'
});

let positionEngine = function() {
    return getPositionGPS({})
        .catch(() => getPositionIP());
};

let p = function() { 
    return Q.spread(positionEngine, mapEngine).then((pos,map) => {
        var mapcontainer = document.getElementById("map");
        return new map.Map(mapcontainer, {
            center: {lat: pos.coords.latitude, lng: pos.coords.longitude},
            zoom: 8
        }); 
    });
};

p().then((m)=>console.log);

Bergi

그것은 Q.spread작동 하지 않습니다 . promise는 여전히 단일 값으로 만 spread확인되며 콜백이 호출되는 방식에 영향을줍니다. 문서에 따르면 다음 중 하나를 작성해야합니다.

return Q.spread([positionEngine, mapEngine], (pos, map) => {

또는

return Q.all([positionEngine, mapEngine]).spread((pos, map) => {

현대적인 접근 방식은 매개 변수 구조화 구문을 사용하는 것입니다.

return Q.all([positionEngine, mapEngine]).then(([pos, map]) => {

ES6 promise로 마이그레이션 할 때도 작동합니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-2

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사