JavaScript 中如何将 Fetch 调用的返回结果赋值给变量

数据老陈

2026-9-26

Fetch结果绑定页面变量失败排查点

this指向错误
如果你用的是Vue、小程序这类框架，fetch的.then()回调如果用普通函数写法，内部的this不会指向页面对象，要么把回调改成箭头函数，要么在fetch调用前先声明const that = this，回调里用that访问页面变量。
错误示例：
```
fetch('你的接口地址')
  .then(function(res) {
    this.pageData = res.json() // 此处this指向不是页面对象，赋值无效
  })
```
正确写法：
```
fetch('你的接口地址')
  .then(res => res.json())
  .then(data => {
    this.pageData = data // 箭头函数继承外层this，指向页面对象
  })
```
未解析Fetch响应对象
Fetch请求返回的是原生Response对象，不能直接赋值给业务变量，必须先调用对应的解析方法处理：
- 接口返回JSON格式：调用res.json()
- 接口返回纯文本：调用res.text()
- 接口返回文件流：调用res.blob()
异步逻辑顺序错误
Fetch是异步API，调用后不会立即返回结果，如果你在fetch调用语句之后同步读取绑定的变量，此时请求还没完成，变量肯定还是初始值。所有需要用到请求返回值的逻辑，都要写在.then()回调里，或者用async/await写法处理异步。
async/await写法示例：
```
async function fetchData() {
  const res = await fetch('你的接口地址')
  const data = await res.json()
  this.pageData = data
  // 后续用到pageData的逻辑都写在这里
}
```
变量无响应式特性
如果是在Vue、React这类框架下，确认你绑定的变量是响应式声明的：Vue要写在data选项或者用ref/reactive声明，React要用useState声明，直接声明的普通变量修改后不会触发页面更新。