Chrome扩展中SpotifyWebApi的setPromiseImplementation方法报错求解

我之前也碰到过这个问题，Spotify Web API的JavaScript库对Promise实现的要求有点特殊——它依赖的是带有defer()方法的Promise规范实现，而原生ES6 Promise并没有这个方法，这就是你遇到两个错误的根源：

错误原因拆解 #

• 第一个错误Uncaught ReferenceError: Q is not defined：你只是调用了setPromiseImplementation(Q)，但没有在Chrome扩展环境中引入Q库，自然找不到这个变量。
• 第二个错误TypeError: _promiseImplementation.defer is not a function：原生ES6 Promise没有defer()方法，而库内部需要用这个方法来创建延迟对象，所以直接传入Promise会报错。

解决方案一：使用Q库（官方推荐方式） #

1. 下载Q库：把Q的JavaScript文件放到你的Chrome扩展目录里，比如命名为q.min.js。
2. 在扩展中引入Q：根据你的扩展脚本类型（background、content script等），在manifest.json里配置加载顺序，确保Q库在SpotifyWebApi之前加载。比如在background脚本中：

   "background": {
     "scripts": ["q.min.js", "spotify-web-api.js", "your-script.js"]
   }
   

3. 设置Promise实现：在你的业务脚本中执行：

   const spotifyApi = new SpotifyWebApi();
   spotifyApi.setPromiseImplementation(Q);
   

这样就能正常使用库的Promise方法了。

解决方案二：适配原生ES6 Promise #

如果你不想引入额外的库，可以自己写一个适配层，给原生Promise模拟出defer()方法：

// 先定义一个模拟defer的函数
const createDeferred = () => {
  let resolveFn, rejectFn;
  const promise = new Promise((resolve, reject) => {
    resolveFn = resolve;
    rejectFn = reject;
  });
  return {
    promise: promise,
    resolve: resolveFn,
    reject: rejectFn
  };
};

// 给SpotifyApi设置适配后的Promise实现
const spotifyApi = new SpotifyWebApi();
spotifyApi.setPromiseImplementation({
  defer: createDeferred
});

这个适配层会返回符合库要求的延迟对象，同时底层用原生ES6 Promise执行。

注意事项 #

• 确保脚本加载顺序：无论是引入Q还是用适配层，都要在SpotifyWebApi库加载完成后再执行设置代码。
• Chrome扩展的上下文：如果是在content script中使用，要注意隔离环境，确保Q库或适配代码能被正确访问到。

内容的提问来源于stack exchange，提问作者Viewed