javascript - 类型错误 : adapter is not a function error when using axios and webpack in Chrome extension

Question

我正在构建一个 chrome 扩展，当从内容脚本收到某些消息时，它需要进行 API 调用。我在发出 HTTP 请求时遇到了困难，我相信我的 webpack 配置是罪魁祸首。
我试过使用 node-fetch和 axios也不适合我。
我的 webpack.common.js 文件如下所示:

const path = require("path");

module.exports = {
  target: "node",
  entry: {
    popup: path.join(__dirname, "src/popup/index.tsx"),
    background: path.join(__dirname, "src/background.ts"),
    contentScript: path.join(__dirname, "src/contentScript.ts"),
  },
  output: {
    path: path.join(__dirname, "dist"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        exclude: /node_modules/,
        test: /\.tsx?$/,
        use: "ts-loader",
      },
      {
        exclude: /node_modules/,
        test: /\.scss$/,
        use: [
          {
            loader: "style-loader", // Creates style nodes from JS strings
          },
          {
            loader: "css-loader", // Translates CSS into CommonJS
          },
          {
            loader: "sass-loader", // Compiles Sass to CSS
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
  },
};

当脚本尝试从 chrome 扩展调用 axios 时，我收到此错误:

dispatchRequest.js:52 Uncaught (in promise) TypeError: adapter is not a function
    at dispatchRequest (dispatchRequest.js:52)

Answer 1

我迟到了 10 个月，但这对任何有同样问题的人都有用。从 Axios 迁移到 fetch 可能是一个不错的选择，但如果您在 Axios 之上构建了一个自定义 API 及其所有实用程序(拦截器、取消等)，那么工作量很大，因此有一个简单的修复:
Axios 在其 configuration 中接受适配器字段, 所以你可以传递一个像 axios-fetch-adapter 这样的获取适配器可能，您需要添加 regenerator-runtime也是，所以在你的 background.js 文件中:

import "regenerator-runtime/runtime.js";