JavaScript调用Pexels图片API改用Request对象后返回异常如何解决

问题根因 #

fetch() 是异步执行的API，调用后会立即返回Promise对象，不会等待接口请求完成再往下执行。你现在代码中直接将这个Promise对象赋值给r，此时接口还没返回数据，r根本不是你拿到的响应结果，自然读不到r.photos属性。你后面控制台打印的完整响应对象，是浏览器异步更新控制台内容的特性导致的，实际代码执行到var photos = r.photos时数据还没回来。

另外补充一个小优化点：你原来的Math.random()*250得到的是小数，Pexels的page参数要求是正整数，最好用Math.floor()取整，避免请求参数异常。

修复方案 #

方案1：使用.then链式处理 #

把所有依赖接口返回数据的逻辑，都放到.then()的回调函数里，保证请求完成后才执行：

// Get PEXELs Image
var page = Math.floor(Math.random()*250);
var key = '替换为你的Pexels授权密钥';
var url = "https://api.pexels.com/v1/search?query=cute+pets&page="+page.toString()+"&per_page=1";
var headers = new Headers();
headers.append('Authorization', key);
var er = new Request(url, {headers:headers})
fetch(er)
    .then(res => res.json())
    .then(r => {
        // 所有依赖响应数据的逻辑都放在这里
        var photos = r.photos
        console.log("photos", photos)
        var raw = photos[0].src.original;
        console.log("raw", raw);
        document.getElementById("image").src=raw;
    })
    .catch(err => {
        // 增加错误捕获方便排查问题
        console.error('请求出错：', err)
    })

方案2：使用async/await语法（更简洁易读） #

把逻辑封装到async函数里，用await等待fetch请求完成拿到结果再往下执行：

// 封装成async函数
async function getPexelsImage() {
    var page = Math.floor(Math.random()*250);
    var key = '替换为你的Pexels授权密钥';
    var url = "https://api.pexels.com/v1/search?query=cute+pets&page="+page.toString()+"&per_page=1";
    var headers = new Headers();
    headers.append('Authorization', key);
    var er = new Request(url, {headers:headers})
    try {
        const res = await fetch(er)
        const r = await res.json()
        var photos = r.photos
        console.log("photos", photos)
        var raw = photos[0].src.original;
        console.log("raw", raw);
        document.getElementById("image").src=raw;
    } catch (err) {
        console.error('请求出错：', err)
    }
}

// 调用函数触发请求
getPexelsImage()

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