如何在带有 vue 的 web worker 中使用 axios？答案

【问题标题】：How use axios in web worker with vue?如何在带有 vue 的 web worker 中使用 axios？
【发布时间】：2019-07-16 14:58:05
【问题描述】：

我已经尝试通过 vue plugin 在 web worker 中使用 axios 请求

我的代码如下所示：

//worker.js

import axios from 'axios';

export default function getApiData(args) {
  axios.get('/api/test').then(response => {
    console.log(response);
  });
}

和 Vue 的主文件

//main.js

import getApiData from './worker.js';

Vue.use(VueWorker);

window.vueApp = new Vue({
  //...
  created: function() {
    this.updateWorker = this.$worker.create([
      {
        message: 'getApiData ',
        func: getApiData 
      }
    ]);
    
    this.testWorker.postMessage('getApiData ', [this.args])
        .then(result => {
          console.log(result);
        })
  },
  //...
}

我得到了这个错误

未捕获的引用错误：axios__WEBPACK_IMPORTED_MODULE_0___默认为未定义

我做错了什么？

【问题讨论】：

我发现问题出在 webpack 错误地构建文件
我遇到了同样的问题，我设法直接使用 fetch 解决了
@MelNik - 你解决了吗？我也喜欢@GustavoAdolfo 求助于fetch
@Lukasz'Severiaan'Grela 不是真的，我使用了网络工作者的本机功能而不是这个插件
对于 webpack 有什么解决办法吗？无论是在我的代码中还是在外部库中，我都在使用任何 Promise 时遇到这种情况，所以这似乎是一个大问题。如果你想通了，你应该发布解决方案

标签： vue.js axios web-worker

【解决方案1】：

我遇到了同样的问题，并通过回归基础解决了它 - 使用普通的旧 XMLRequest（见下文）。

您不能在工作程序中使用 axios，因为在后台创建的用于加载 worker.js 的 blob 运行在与您的 main.js 不同的上下文中。为了让 axios 工作，你必须设置一个新的 webpack 打包器来单独打包 worker。我不想这样做——它使项目结构变得不必要的复杂。

这是一个简单的解决方案（适用于 json 和非 json 响应）。

// worker.js

export default () => {
  self.addEventListener('message', e => {
    if (!e) return;

    // wrap in try/catch if you want to support IE11 and older browsers
    // that don't support Promises. The implementation below doesn't work
    // even when polyfills are loaded in the main project because
    // the worker runs in a different context, ie no webpack bundles here.
    try {
      const fetchData = (url, isJSON = true) => {
        return new Promise((resolve, reject) => {
          function reqListener() {
            if (this.status !== 200) {
              return reject();
            }
            const response = isJSON
              ? JSON.parse(this.responseText)
              : this.responseText;
            resolve(response);
          }
          const oReq = new XMLHttpRequest();
          oReq.addEventListener('load', reqListener);
          oReq.open('GET', url);
          oReq.send();
        });
      };

      const baseUrl = 'https://static.newsfilter.io/';
      const { articleId } = e.data;


      const jsonUrl = baseUrl + articleId + '.json';
      const htmlUrl = baseUrl + articleId + '.html';

      // My use case requires 2 requests in parallel. 
      const tasks = [fetchData(jsonUrl), fetchData(htmlUrl, false)];

      Promise.all(tasks)
        .then(data => {
          postMessage({ json: data[0], html: data[1] });
        })
        .catch(error => {
          postMessage({ isError: true, error });
        });
    } catch (error) {
      postMessage({ isError: true });
    }
  });
};

【讨论】：