JavaScript使用Fetch调用REST API返回JSON响应的异常排查问题

问题1：response未定义错误排查方向 #

• 核查JavaScript变量作用域规则：重点看response变量的声明位置，回调函数内部声明的变量默认无法在函数外部直接访问
• 核查异步代码执行顺序：fetch是异步API，调用后不会阻塞后续代码执行，你写在fetch之后的console.log会早于then回调执行，此时response还未被创建

问题2：API返回内容检测排查方向 #

• 先明确fetch返回的Response对象结构：Response本身不会直接挂载接口返回的业务字段，需要先调用response.json()/response.text()等方法解析响应体才能拿到业务数据
• 新增错误捕获逻辑：可以用try/catch包裹异步请求逻辑，或是给fetch添加catch分支，优先排查是否存在网络错误、跨域、接口返回4xx/5xx状态码等问题

更新后代码无输出排查方向 #

• 检查异步立即执行函数是否正确调用：你当前只定义了异步函数，末尾没有加()触发执行，函数本身不会自动运行
• 核对接口请求规则：你使用GET方法但携带了请求体，大部分服务端不支持GET请求接收body参数，确认接口要求的请求方式是GET还是POST
• 新增状态码校验：先打印response.status确认HTTP返回状态，只有2xx开头的状态码才代表请求正常，4xx/5xx状态码需要先处理对应请求错误
• 校验返回内容格式：可以先调用response.text()打印原始返回内容，确认返回内容是合法JSON格式，避免response.json()解析失败卡住

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