类型错误：在Chrome扩展中使用AXIOS和webpack时适配器不是函数错误

TypeError: adapter is not a function error when using axios and webpack in Chrome extension(类型错误：在Chrome扩展中使用AXIOS和webpack时适配器不是函数错误)

问题描述

我正在构建一个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)

推荐答案

我好像迟到了10个月，但这对任何有同样问题的人都很有用。从Axios迁移到FETCH可能是一个很好的选择，但是如果您在Axios之上构建了一个带有所有实用程序(拦截器、取消等)的自定义API，则需要做大量工作，因此有一个简单的修复方法：

Axios在其configuration中接受适配器字段，因此您可以传递类似axios-fetch-adapter的FETCH适配器，而且您可能还需要添加regenerator-runtime，因此在backround.js文件中：

import "regenerator-runtime/runtime.js";

这篇关于类型错误：在Chrome扩展中使用AXIOS和webpack时适配器不是函数错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！