Vue中如何将首次axios请求结果用于第二次axios调用

问题根源 #

你的代码无法获取到response.request.res.responseUrl供后续POST使用，核心原因有两个：

• postUrl是在GET请求的.then()回调内部用let声明的，属于回调函数的块级局部作用域，回调外部的代码没有访问这个变量的权限
• Axios请求是异步执行的，写在GET请求外层的POST请求逻辑不会等待GET请求返回结果就会提前执行，就算把postUrl提到外层声明，执行POST时变量也还没被赋值。

方案1：Promise链式调用（无需async/await） #

直接把POST请求逻辑放到GET请求的成功回调里执行，保证拿到重定向URL之后再发起POST，不需要额外声明外层作用域变量：

this.$axios.get('http://first-url.call')
  .then(response => {
    const postUrl = response.request.res.responseUrl
    // 拿到地址后直接发起POST，把Promise返回给下一个then处理
    return this.$axios.post(postUrl)
  })
  .then(postRes => {
    console.log('POST请求响应结果：', postRes)
    // 在这里写POST请求成功后的业务逻辑即可
  })
  .catch(err => {
    // 可以统一捕获GET、POST两个请求的所有错误
    console.log('请求异常：', err)
  })

这里用箭头函数是为了保证回调内部的this指向外层Vue实例，避免上下文丢失导致的this.$axios报错问题。

方案2：async/await写法（逻辑更直观） #

如果习惯用同步风格写异步逻辑，可以给对应方法加async标识，用await等待请求返回后再执行后续逻辑，变量可以直接在同一作用域内赋值使用：

// 对应Vue组件methods里的业务方法
async submitRequest() {
  try {
    // 等待GET请求返回结果后再往下执行
    const getRes = await this.$axios.get('http://first-url.call')
    const postUrl = getRes.request.res.responseUrl
    // 拿到重定向地址后，等待POST请求返回
    const postRes = await this.$axios.post(postUrl)
    console.log('POST请求响应结果：', postRes)
    // 后续所有依赖postRes的业务逻辑直接往下写即可
  } catch (err) {
    // try块中任意一步请求报错都会被这里捕获
    console.log('请求异常：', err)
  }
}

注意：如果运行时拿不到responseUrl属性，先检查Axios配置中maxRedirects值是否大于0，该配置为0时Axios不会自动跟随重定向，无法获取最终跳转的地址。

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