如何从fetch获取响应值而不是没有值的promise？

Posted 2021-04-04

我正在构建一个chrome扩展来从页面中提取数据以从数据中构建一个url，我希望将该url缩短为最终产品。在我的内容脚本文件中，我调用了url shortener来压缩链接。我不断得到一个没有价值的承诺，崩溃的反应。在devtools中，我看到callout成功完成并返回了url。

我试过异步等待，一个完整的异步函数，试图强制response.toString()

这是相关的代码部分。

var listingInfo = new Map();    
listingInfo.set('Address', 'some standard address');    
var tinyLink = '(http://tinyurl.com)/api-create.php?url='; //() because I can't share shortener urls on this site.

/*-----------------------------------GET LINKS--------------------------*/

if(listingInfo.has('Address')){   var mapsLink = `https://www.google.com/maps/place/${listingInfo.get('Address').replace(new RegExp(" ", "g"), '+')}`;

  tinyLink = `${tinyLink}${mapsLink} `;

  var dirLink = fetch(tinyLink, {
    method: "GET", 
    mode: "no-cors", 
    headers: {"Content-Type": "text/html"}   }).then((response)=>{
    return response;   });

  listingInfo.set('dirLink', dirLink); }

我希望收到一个纯文本字符串，因为在devtools的网络选项卡中它显示了一个简单的字符串url而不是任何JSON，但我一直收到value=""已解决的承诺。

答案

// made this function to use XMLHttpRequest()
const setLink = (propName, url) => {
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {

var link = xhr.responseText;
console.log(`link: '${link}'`);
listingInfo.set(propName, link);
}
}
xhr.send();
}

// Then called setLink()
if(listingInfo.has('Address')){
var mapsLink = 
`https://www.google.com/maps/place/${listingInfo.get('Address').replace(new 
RegExp(" ", "g"), '+')}`;

dirLink = `${tinyLink}${mapsLink}`;

console.log(dirLink);

setLink('dirLink', dirLink);
console.log(dirLink);


}