MapQuest PlaceSearch.js调用时出现未捕获Promise错误如何修复

算力阿峰

2026-9-1

问题现象

简易输入框触发调用place-search.js脚本时，用户开始输入就抛出如下控制台错误：

Uncaught (in promise) Error: Uncaught, unspecified "error" event. ([object Response])

原有监听文本框输入的初始化代码如下：

function addlistener(id){
        // 动态加载place-search脚本
        loadScripts({
          test: function() { return typeof placeSearch !== 'undefined'; },
          scripts: 'https://api.mqcdn.com/sdk/place-search-js/v1.0.0/place-search.js',
          done: function() { 
           placeSearch({
                key: key,
                container: document.querySelector('#'+id),
                useDeviceLocation: useDeviceLocation,
                collection: collection
              });
          }
        }); 
    }

错误含义

这个报错是place-search.js内部的异步逻辑（包括搜索接口请求、定位请求、初始化校验等）返回了错误响应，但初始化组件时没有绑定对应的错误监听回调，导致异步抛出的异常没有被捕获，最终成为全局未捕获的Promise错误。报错中提到的[object Response]就是失败的响应对象，只是因为没有监听处理，没有把具体错误内容暴露出来。

常见触发原因：

传入的API密钥key无效、过期，或者没有开通地点搜索接口的调用权限
collection参数传入了不被支持的取值，不符合接口要求
开启useDeviceLocation时，页面非HTTPS环境导致浏览器拒绝定位，或者用户手动拒绝了定位授权
传入的container容器不存在，document.querySelector('#'+id)返回null导致组件初始化失败
网络异常、跨域配置错误导致接口请求失败

修复方案

增加前置参数校验，初始化组件前先确认目标输入框元素存在，避免传入无效DOM
给placeSearch实例绑定error事件监听，统一捕获组件内部的所有异常，既可以避免全局未捕获错误，也能打印完整错误信息方便排查
核对初始化配置项：确认密钥有效、collection取值为官方支持的枚举值、HTTPS环境下再开启设备定位功能

修正后的代码如下：

function addlistener(id){
  loadScripts({
    test: function() { return typeof placeSearch !== 'undefined'; },
    scripts: 'https://api.mqcdn.com/sdk/place-search-js/v1.0.0/place-search.js',
    done: function() { 
      const searchContainer = document.querySelector('#'+id);
      // 前置校验容器是否存在
      if (!searchContainer) {
        console.error('搜索输入框不存在，目标id：', id);
        return;
      }
      // 初始化搜索组件
      const searchInstance = placeSearch({
        key: key,
        container: searchContainer,
        useDeviceLocation: useDeviceLocation,
        collection: collection
      });
      // 绑定错误监听捕获所有内部异常
      searchInstance.on('error', function(errorRes) {
        // 此处可自定义错误提示逻辑，打印完整错误信息定位问题
        console.error('地点搜索组件运行异常：', errorRes);
      });
    }
  }); 
}

加上错误监听后，控制台会打印出完整的错误响应内容，根据响应的HTTP状态码和返回提示即可定位具体问题：比如403状态码对应密钥权限问题，400对应参数配置错误。

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