Javascript 如何从承诺中返回字符串

我在vue的一个网站上工作，在那里我必须用axios从服务器上获取图像，并将它们作为div的背景图像。情况是，我有网址，但不是所有的都是正确的。因此，我试图创建一个函数，该函数发出http请求，如果请求成功，则返回url

我想到了这样的事情：

模板：

---

我希望从该函数返回url，但什么也没有发生。

与其从then回调返回，然后将块的结果传递到下一个then，不如存储从响应对象中查找的数据，以便在承诺之外使用。

使用计算值或临时值，这将使它更容易

You should use setAttribute method.

 //add id to the element
<div id="element" class="element" />

var url = url(${response.config.url});

// select the element using id and set image
document.getElementById("element").setAttribute("style", "background-image:"+ url); 

在这个解决方案中，您可以设置一个占位符图像，以便在加载时显示或保留为空

然后使用已安装的挂钩加载数据，然后指定给样式

模板：

脚本：

数据：{ 返回=>{ imgStyle：{ “背景图像”：“urlmy placeholder.png”//或根本不包括在内 } } }, 安装{ axios.geturl .thenresponse=>{ 这个.setthis.imgStyle，'background image'，'url${response.config.url}`； } 凯西先生{ 抛出新的错误； } } 作为旁注，请尽量避免使用模板中的函数来显示可以使用计算出的值。

您可以使用：

指令'validate-bgimg'，函数el，绑定{ el.style.backgroundImage=null//reset var url=binding.value 如果！url{ 回来 } axios.get`https://cors-anywhere.herokuapp.com/${url}`//绕过CORS限制。理想情况下，您应该调用自己的api来验证图像url .thenresponse=>{ 如果response.status！=200{ console.warnInvalide图像url、url、响应 }否则{ el.style.backgroundImage=`url${url}` } } .catch=>{ console.Error无法验证图像、url、e } } 新Vue{ el:应用程序， 数据：{ imgUrl：未定义 } } 应用程序{ 背景：浅灰色； 边界半径：4px； 填充：20px； 利润率：20px； 过渡：均为0.2s； } .元素{ 利润率：8px0； 宽度：200px； 高度：200px； } 测试用例： 1. 2. 3. HTTP 404 HTTP 503 无法解析域名

---

不能简单地从axios.get之类的异步函数返回值。花些时间阅读异步函数和承诺是如何工作的。re:duplicate的可能重复，不完全是，因为OP正在寻找vue解决方案。由于每个元素都是迭代的结果，因此这将没有用处。每一个都有一个不同的url，但在只有一个项目的组件中，它会很有用。也许你可以在你的问题中详细说明。没错，也许我可以制作一个组件并迭代它，这样我就可以使用这个答案。你可以，但如果你使用数组，我可能会使用临时数组来创建数组的副本，并在每个需要它的项上添加imgStyle或类似的东西。当接收到原始数组时，将复制该数组，然后我将以串行或并行方式获取所有图像

methods: {
  bgImg(url) {
    axios.get(url)
      .then(response => {
        return `background-image: url(${response.config.url})`;
      })
      .cath(e) {
        throw new Error(e);
      }
  }
}

You should use setAttribute method.

 //add id to the element
<div id="element" class="element" />

var url = url(${response.config.url});

// select the element using id and set image
document.getElementById("element").setAttribute("style", "background-image:"+ url);