原生JS用fetch发POST请求报错response.json is not a function如何解决

问题根因 #

fetch是异步API，调用后返回的是Promise对象，而非直接的请求响应结果。你当前的代码没有等待异步请求执行完成，直接对Promise对象调用.json()方法，因此会触发response.json is not a function报错。

修正方案 #

推荐使用async/await语法处理异步逻辑，修正后的JS代码如下：

const url = `http://localhost:8081/laptop`
let name = document.getElementById('name')
let price = document.getElementById('price')
let description = document.getElementById('description')

// 给函数添加async标识，声明为异步函数
async function sendData () {
  let name_of_laptop = name.value
  let price_of_laptop = price.value
  let laptop_description = description.value

  let data = {name: name_of_laptop, price: price_of_laptop, description: laptop_description}

  try {
    // 添加await等待请求完成，拿到真实的Response响应对象
    const response = await fetch(url, {
        method: 'POST',
        body: JSON.stringify(data),
        headers: {
            'Content-Type' : 'application/json'
        }
    });
    // .json()本身也是异步方法，同样需要添加await等待解析完成
    let json = await response.json();
    console.log('Success', JSON.stringify(json))
  } catch (error) {
    console.error('Mistake',error)
 }
}

如果你习惯用链式调用写法，也可以用.then实现：

function sendData () {
  let name_of_laptop = name.value
  let price_of_laptop = price.value
  let laptop_description = description.value
  let data = {name: name_of_laptop, price: price_of_laptop, description: laptop_description}

  fetch(url, {
      method: 'POST',
      body: JSON.stringify(data),
      headers: {
          'Content-Type' : 'application/json'
      }
  })
  .then(response => response.json())
  .then(json => {
    console.log('Success', JSON.stringify(json))
  })
  .catch(error => {
    console.error('Mistake',error)
  })
}

额外优化建议 #

可以在解析响应前先判断请求是否成功，避免接口返回4xx/5xx错误时解析异常：

const response = await fetch(/* 请求参数 */)
if (!response.ok) {
  throw new Error(`请求错误，状态码：${response.status}`)
}
const json = await response.json()

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