`sendResponse()`가 Chrome의 `onMessage` 리스너에서 비동기 함수를 기다리지 않는 이유는 무엇입니까?

비동기 함수 또는 Promise의 해결을 기다리지 않는 "sendResponse"

소개

popup.js에서 메시지를 보낼 때 contentscript.js, sendResponse() 함수 getThumbnails() 함수가 완료될 때까지 기다려야 합니다. 그러나 이 시나리오에서는 sendResponse()가 기다리지 않아 비동기성 문제가 발생합니다.

문제 설명

가장 큰 문제는 Chrome에서 onMessage 리스너의 반환 값에 대한 약속에 대한 지원이 여전히 부족하다는 것입니다. 매니페스트 V2와 V3 모두에서. 결과적으로 리스너가 async 키워드를 선언하면 onMessage에 필요한 리터럴 참 값 대신 약속을 반환합니다. 이로 인해 반환된 Promise가 무시되어 메시징 채널이 조기에 닫힙니다.

해결책: 리스너를 호환 가능하게 만들기

현재 Chrome 구현과의 호환성을 보장하려면 이전에서 async 키워드를 제거할 수 있습니다. 함수 매개변수(요청, 보낸 사람, sendResponse)를 사용하고 메시지 처리를 처리하기 위한 별도의 비동기 함수를 선언합니다.

chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.message === "get_thumbnails") {
    processMessage(msg).then(sendResponse);
    return true; // keep the messaging channel open for sendResponse
  }
});

async function processMessage(msg) {
  console.log('Processing message', msg);
  // ... asynchronous processing code
  return 'foo';
}

API 패치 비동기/약속 리스너 허용

또는 chrome.runtime.onMessage를 사용하여 각 스크립트에 다음 코드를 추가하여 비동기/약속 리스너를 허용하도록 API를 패치할 수 있습니다.

if ('crbug.com/1185241') { // replace with a check for Chrome version that fixes the bug
  const {onMessage} = chrome.runtime, {addListener} = onMessage; 
  onMessage.addListener = fn => addListener.call(onMessage, (msg, sender, respond) => {
    const res = fn(msg, sender, respond);
    if (res instanceof Promise) return !!res.then(respond, console.error);
    if (res !== undefined) respond(res);
  });
}

패치가 적용되면 값을 직접 반환할 수 있습니다.

chrome.runtime.onMessage.addListener(async msg => {
  if (msg === 'foo') {
    const res = await fetch('https://foo/bar');
    const payload = await res.text();
    return {payload};
  }
});

위 내용은 `sendResponse()`가 Chrome의 `onMessage` 리스너에서 비동기 함수를 기다리지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!