React.js中使用Axios调用Flickr API无法访问内部数据

算力阿峰

2026-8-12

解决Flickr API响应无法访问内部属性的问题

问题出在Flickr API的响应格式上：你当前请求里用了format=json，但Flickr默认返回的是JSONP格式（响应内容被jsonFlickrApi(...)包裹），而非纯JSON。这导致axios拿到的response.data其实是字符串，不是解析后的JavaScript对象——直接访问response.data.photos会返回undefined，但浏览器控制台会自动把字符串格式的JSON展示成可展开对象，给你造成已经是对象的错觉。

两种解决方法：

方法1：让Flickr返回纯JSON（推荐）

在请求URL末尾添加&nojsoncallback=1参数，强制Flickr返回不带包裹的纯JSON，axios会自动解析成对象，之后就能正常访问内部属性：

import React from "react";
import axios from "axios";

function API(props) {
    axios
    .get("https://www.flickr.com/services/rest/?method=flickr.photos.search&api_key=8a67ea6102e401ad62ded664a49689ec&text=cat&per_page=5&size=w&format=json&nojsoncallback=1")
    .then((response) => {
        console.log(response.data.photos); // 现在可正常访问
        console.log(response.data.photos.photo); // 具体的照片数组
    });
    return true;
}

export default API;

方法2：手动处理JSONP格式的响应字符串

如果无法添加nojsoncallback=1，可以手动移除响应字符串的包裹前缀和后缀，再解析成JSON对象：

import React from "react";
import axios from "axios";

function API(props) {
    axios
    .get("https://www.flickr.com/services/rest/?method=flickr.photos.search&api_key=8a67ea6102e401ad62ded664a49689ec&text=cat&per_page=5&size=w&format=json")
    .then((response) => {
        // 移除jsonFlickrApi(前缀和末尾的)
        const rawJson = response.data.replace(/^jsonFlickrApi\(/, "").replace(/\)$/, "");
        const data = JSON.parse(rawJson);
        console.log(data.photos); // 正常访问内部属性
    });
    return true;
}

export default API;