关于Axios中依赖POST请求及JSON.parse、finally用法的疑问

1. finally用法的错误点 #

你用finally来保证第一个请求完成后执行第二个请求是不合理的：

• finally无论第一个请求成功还是失败都会触发，如果第一个请求报错，第二个请求依然会执行，不符合“第一个请求成功后才执行第二个”的需求
• info是第一个then回调里的局部变量，finally的作用域无法访问它，会直接抛出info is not defined的错误

正确的方式是使用链式then调用，第一个请求成功后，在后续的then里执行第二个请求，同时可以自然传递参数。

2. JSON.parse的问题 #

axios会自动解析Content-Type为application/json的响应，你拿到的response对象中，response.data已经是解析好的JSON对象，不需要再调用JSON.parse(response)——你现在传入JSON.parse的是axios的Response对象，不是原始JSON字符串，这必然导致解析失败。

修正后的代码 #

axios(config)
  .then((response) => {
    // 直接使用axios已解析好的response.data
    const info = response.data.info;
    // 将需要的参数传递给下一个then
    return info;
  })
  .then((info) => {
    // 第一个请求成功后，执行第二个请求
    const finalConfig = `${info} and final`; // 假设这是第二个请求的合法配置
    return axios(finalConfig);
  })
  .then((secondResponse) => {
    // 处理第二个请求的返回结果
    console.log('第二个请求响应:', secondResponse.data);
  })
  .catch((error) => {
    // 捕获任意一个请求的错误
    console.error('请求出错:', error);
  });

额外提示 #

• 如果第一个响应不是JSON格式（比如纯文本），才需要用JSON.parse(response.data)，但这种场景极少，axios默认会根据响应头自动处理
• 务必加上catch捕获错误，避免请求失败时没有错误处理逻辑

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