类型错误：response.json 不是 JavaScript 中的函数

作者

目录

TypeError: response.json is not a function in JavaScript

  1. 类型错误：response.json 不是 JavaScript 中的函数
  2. JavaScript 获取：无法在“响应”上执行“json”

如果您收到错误“获取：无法在‘响应’上执行‘json’”，请单击第二个副标题。

TypeError: response.json 不是 JavaScript 中的函数

在以下情况下会发生“response.json 不是函数”错误：

  • 我们在一个对象上调用该json()方法，该对象不是Response从方法返回的承诺解析的对象fetch()。
  • 我们json()在调用方法的返回值上调用axios方法。

typeerror 响应 json 不是一个函数

json()在有效Response对象上调用方法

要解决该错误，请确保只调用
从对该方法的有效调用解析的对象json()上的方法。Responsefetch()

索引.js
async function getUser() {
  try {
    const response = await fetch('https://randomuser.me/api/');

    if (!response.ok) {
      throw new Error(`Error! status: ${response.status}`);
    }

    // ✅ call response.json() here
    const result = await response.json();
    return result;
  } catch (err) {
    console.log(err);
  }
}

console.log(await getUser())

代码示例显示了使用fetch()方法调用远程 API的完整示例
。

response.json()如果您使用
语法，这里是调用该方法的示例.then()。

索引.js
function getUser() {
  return (
    fetch('https://randomuser.me/api/')
      // ✅ call response.json() here
      .then(response => response.json())
      .then(data => {
        console.log(data);
      })
      .catch(err => {
        console.log(err);
      })
  );
}

getUser();
如果您使用axios，请向下滚动到下一个副标题。

该fetch()方法返回Promise解析为Response对象的 。

该Response对象包含json()返回解析为 JavaScript 对象的承诺的方法。

JavaScript 对象包含从远程 API 调用返回的值。

json ()
方法从对本机 JavaScript 对象的响应中解析 JSON。

解决使用时的错误axios

如果您使用axios，则不必json()在响应中调用该方法。

索引.js
import axios from 'axios';

async function getUser() {
  try {
    const response = await axios.get('https://randomuser.me/api/', {
      headers: {'Accept-Encoding': 'gzip,deflate,compress'},
    });

    return response.data;
  } catch (err) {
    console.log(err);
  }
}

console.log(await getUser());

Axios 负责自动解析响应，因此我们不必调用任何其他方法。

访问data对象的属性以从响应中获取数据。

该data属性包含从服务器发送的响应。

这是一个使用.then()语法而不是async/await.

索引.js
import axios from 'axios';

async function getUser() {
  return axios
    .get('https://randomuser.me/api/', {
      headers: {'Accept-Encoding': 'gzip,deflate,compress'},
    })
    .then(response => {
      console.log(response.data);
    })
    .catch(err => {
      console.log(err);
    });
}

await getUser();

响应对象的其他属性axios包括：

  • status– 服务器响应的状态码
  • statusText– 响应的 HTTP 状态消息，例如OK
  • headers– 服务器响应的 HTTP 标头
  • configaxios-为请求提供的配置
  • request– 生成此响应的请求

JavaScript 获取：无法在“响应”上执行“json”

response.json()多次调用该方法时出现JavaScript fetch错误“Failed to execute ‘json’ on ‘Response’: body stream already read” 。

要解决错误，请确保只使用fetch一次响应。

无法在已读取的响应主体流上执行 json

下面是错误如何发生的示例。

索引.js
function makeRequest() {
  return fetch('https://randomuser.me/api/').then(response => {
    console.log(response.json());

    // ⛔️ Uncaught (in promise) TypeError: Failed to execute 'json' on 'Response': body stream already read
    return response.json();
  });
}

makeRequest();

请注意，我们调用了该reponse.json方法两次。

我们首先在调用中调用方法console.log，然后在语句中调用方法return。

该response.json方法接受一个响应流并将其读取完成。

调用该方法后，流已被读取，因此再次尝试调用该方法会导致错误。

正如错误消息所述：“body stream already read”。

要解决该错误，请确保只调用该response.json()方法一次。

链接一个额外的 .then() 调用来记录数据

解决错误的一种方法是将调用返回response.json()并链接到另一个.then()调用。

索引.js
function makeRequest() {
  return fetch('https://randomuser.me/api/')
    .then(response => {
      return response.json();
    })
    .then(result => {
      console.log(result);
    });
}

makeRequest();

该.json()方法返回一个解析为 JavaScript 对象的 Promise，因此我们可以安全地链接.then()对方法返回值的调用。

下面是一个使用该async/await语法的示例。

索引.js
async function makeRequest() {
  const response = await fetch('https://randomuser.me/api/');

  const responseJSON = await response.json();

  console.log(responseJSON);

  return responseJSON;
}

makeRequest();

语法async/await更加简洁和直观。

我们调用该response.json()方法并将结果存储在一个变量中。

然后我们可以安全地使用console.log()变量而无需
response.json再次调用该方法。

使用clone()方法解决错误

如果错误仍然存​​在，请在调用之前使用
clone()
方法创建响应对象的克隆json()。

索引.js
function makeRequest() {
  return fetch('https://randomuser.me/api/')
    .then(response => {
      return response.clone().json();
    })
    .then(result => {
      console.log(result);
    });
}

makeRequest();

如果出于某种原因，您必须.json()多次调用响应的方法，请clone()每次都使用该方法克隆它。

索引.js
function makeRequest() {
  return fetch('https://randomuser.me/api/')
    .then(response => {
      // 👇️ calling clone() here
      console.log(response.clone().json());

      // 👇️ calling clone() here as well
      return response.clone().json();
    })
    .then(result => {
      console.log(result);
    });
}

makeRequest();

代码示例不会引发错误，因为我们在每次clone()调用之前都使用了该方法。json()

这是一个使用async/await语法 with的示例clone()。

索引.js
async function makeRequest() {
  const response = await fetch('https://randomuser.me/api/');

  const responseJSON = await response.clone().json();

  console.log(responseJSON);

  return responseJSON;
}

makeRequest();

请注意，clone()如果响应正文已被使用，该方法将抛出 TypeError。

例如，运行以下代码示例会导致错误。

索引.js
async function makeRequest() {
  const response = await fetch('https://randomuser.me/api/');

  // 👇️ this reads the stream
  console.log(response.json());

  // ⛔️ Uncaught (in promise) TypeError: Failed to execute 'clone' on 'Response': Response body is already used
  const responseJSON = await response.clone().json();

  console.log(responseJSON);

  return responseJSON;
}

makeRequest();

该方法的目的clone()是使您能够json()多次调用该方法，但是，您必须clone()每次都使用该方法来克隆响应对象。

如果您收到
TypeError: Failed to fetch 和 CORS
错误，请单击链接并按照说明进行操作。

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：