React中.then与async/await差异：PUT请求后状态更新异常排查

嗨，我来帮你理清楚这个问题——其实不是.then和async/await本身不等价，而是你的.then链式调用写错了，导致异步操作的顺序出了问题！

问题核心：你的.then写法破坏了异步顺序 #

先看你的错误代码：

editPost(newPost)
.then(axios.get('/blog')
.then(response => {
  this.setState({ posts: response.data, titl: '', auth: '', cont: '' })
}))

这里的关键错误是：你把axios.get('/blog')直接作为参数传给了editPost的.then，而不是传递一个回调函数。这意味着axios.get会在editPost的PUT请求还没完成时就立即执行！

想象一下这个时序：

1. 发起editPost的PUT请求
2. 立刻发起axios.get的GET请求（这时候后端可能还没完成修改）
3. 有时候PUT请求先完成，GET拿到新数据；有时候GET先拿到旧数据，PUT之后才完成——这就是为什么只有半数情况生效的原因！

正确的.then链式写法 #

你需要把axios.get放在一个回调函数里，这样它才会等editPost的Promise resolved之后再执行：

onEditSubmit(e){
  e.preventDefault()
  const newPost = { id: this.state.id, title: this.state.titl, author: this.state.auth, content: this.state.cont }
  editPost(newPost)
  // 用箭头函数包裹，确保axios.get在editPost完成后才执行
  .then(() => axios.get('/blog'))
  .then(response => {
    this.setState({ posts: response.data, titl: '', auth: '', cont: '' })
  })
}

这样链式调用的顺序就和async/await完全一致了：先等PUT完成，再发起GET，最后用新数据更新state。

为什么async/await没问题？ #

async/await本质上是Promise的语法糖，它通过线性的写法强制保证了异步操作的顺序：

await editPost(newPost) // 等PUT完成
var response = await axios.get('/blog') // 再发起GET
await this.setState(...) // 最后更新state

每一行的await都会暂停函数执行，直到前一个Promise完成，所以不会出现顺序错乱的问题。

关于setState的异步特性 #

你提到的setState异步特性其实和这个问题关系不大——因为你是基于后端返回的最新数据来更新state，不管setState是不是异步，只要数据是新的，最终都会正确渲染页面。核心问题还是出在Promise链式调用的顺序错误上。

总结 #

修正你的.then链式写法，让axios.get在editPost完成后再执行，两种写法的表现就会完全一致了！

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