Axios - 如何读取 JSON 响应？

IT技术 javascript reactjs slim axios
2021-03-26 19:30:11

Axios 0.17.1

.then(function (response) {
                console.log(response);
                //console.log(response.status);
                //It is an error -> SyntaxError: Unexpected token u in JSON at position 0 
                console.log(JSON.parse(response.data.error));
                console.log(response.data.error); //undefined.

响应的 console.log 是

{data: "{"error":"Name 必须输入多个… NULL↵
["isPipe":protected]=>↵ NULL↵ }↵}↵", status: 203, statusText: "Non-Authoritative Information ", headers: {...}, config: {...}, ...} config: {adapter: ƒ, transformRequest: {...}, transformResponse: {...}, timeout: 0, xsrfCookieName: "XSRF-TOKEN", ...} 数据: "{"error":"名称必须输入一个以上字符。"}object(Slim\Http\Response)#32 (5) {↵ ["status":protected]=>↵ int(200)↵ ["reasonPhrase":protected]=>↵ string(0) ""↵ ["protocolVersion":protected]=>↵ string(3) "1.1"↵ ["headers":protected]=>↵ object(Slim\Http \Headers)#33 (1) {↵
["data":protected]=>↵ 数组(1) {↵ ["内容类型"]=>↵
数组(2) {↵ ["值"]=>↵ 数组(1) {↵ [0]=>↵
string(24) "text/html; charset=UTF-8"↵ }↵
["originalKey"]=>↵ string(12) "Content-Type"↵ }↵ }↵ }↵ ["body":protected]= >↵ object(Slim\Http\Body)#31 (7) {↵
["stream":protected]=>↵ 类型 (stream) 的资源(59)↵
["meta":protected]=>↵ NULL↵ [ "可读":protected]=>↵ NULL↵
["writable":protected]=>↵ NULL↵ ["seekable":protected]=>↵
NULL↵ ["size":protected]=>↵ NULL↵ ["isPipe ":protected]=>↵
NULL↵ }↵}↵" headers : {content-type: "application/json;charset=utf-8"} 请求: XMLHttpRequest {onreadystatechange: ƒ, readyState: 4, timeout: 0, withCredentials ： 错误的， 上传：XMLHttpRequestUpload，...} 状态：203 statusText：“非权威信息”原型：对象

JSON.parse(response.data) 以及 response.data.error -> 两者都给出错误。我如何读取数据？

3. 瘦身框架 

$data = array('error' => 'Name must be entered with more than one character.');
        $newResponse = $response->withJson($data, 203);
        return $newResponse;
6个回答

在 Axios 中，响应已经作为 javascript 对象提供，无需解析，只需获取响应和访问数据。

你可以发布 RAW 输出吗？ES：控制台日志（响应）。如果您使用的是 chrome，我的意思不是网络中的“预览”选项卡，而是“响应”选项卡。
2021-05-28 19:30:11
这意味着 response.data 存在但没有“错误”键，你能发布 response.data 的输出吗？通常当 response.error 未定义时，仅意味着 axios 响应没有错误。
2021-05-30 19:30:11
console.log(response.data.error); //undefined- 我可以记录 response.data 但 response.data.error 未定义。无法使用 JSON.parse - 它给了我错误。
2021-06-02 19:30:11
黄色框（内容）是从 slimframework 收到的响应的 console.log。- 请检查我再次更新。
2021-06-10 19:30:11

假设来自服务器的响应如下所示：

{"token": "1234567890"}

然后在 Axios 中，您可以像这样访问它：

console.log( response.data.token )

我有一个与控制台日志中类似的格式响应，我的问题是我的 .json 文件格式不正确。我少了一个逗号。发布您的 json 文件以查看。

axios 通过 defualt 将响应转换为 JSON，您必须使用response.data而不是response

export const addPosts = () => async (dispatch) => {
await axios('https://jsonplaceholder.typicode.com/todos/1')
    .then(response => dispatch({type: postActionTypes.POSTS, payload: response.data}))}

如前所述，Axios 已经默认返回 JSON。只需使用 response.data 作为简单的 JS 对象。

但是，以下见解可能对其他人有所帮助：我遇到了一个问题，即 Axios 将响应作为字符串返回。在调查时，我发现服务器返回了一个无效的 JSON（它是一个静态文件服务器）。当修复 JSON 格式时，Axios 再次使用 JSON 而不是字符串。

其它你可能感兴趣的问题
上一篇如何在 ReactJS 中输出文本而不将其包装在 span 中 下一篇react - 发生了缩小的异常