Question

我正在尝试调用第三方API，以获取一些数据。我在Postman中得到响应，但是在执行代码时没有得到期望的响应。

我尝试了2种方法。两种方式都得到“承诺未决”。可能是什么原因？

// request.js 方法1

export const callSearchGiftsAPI = inputs => dispatch => {
    dispatch(searchGifts());
    let url = new URL(GIFT_SEARCH_API_URL),
        params = {
            apiKey: GIFT_SEARCH_API_KEY,
            query: inputs.item,
            country: 'us',
            itemsPerPage: 3
        };
    Object.keys(params).forEach(key => url.searchParams.append(key, params[key]));

    return new Promise((resolve, reject) => {
        setTimeout(() => resolve(
            fetch(url, {
                method: 'GET',
                // mode: 'no-cors',
                headers: {
                    'Content-Type': 'application/json',
                    Authorization: `secret ${SECRET}`
                }
            })
                .then(res => {
                    if (!res.ok) {
                        return Promise.reject(res.statusText);
                    }
                    console.log("hi", res.json());
                    return res.json();
                })
                .then(gifts => dispatch(searchGiftsSuccess(gifts)))
                .catch(err => dispatch(searchGiftsError(err)))), 500)
    });
}

方法2：

export const callSearchGiftsAPI = inputs => dispatch => {
        dispatch(searchGifts());
        let url = new URL(GIFT_SEARCH_API_URL),
            params = {
                apiKey: GIFT_SEARCH_API_KEY,
                query: inputs.item,
                country: 'us',
                itemsPerPage: 3
            };
        Object.keys(params).forEach(key => url.searchParams.append(key, params[key]));
        fetch(url, {
            method: 'GET',
            // mode: 'no-cors',
            headers: {
                'Content-Type': 'application/json',
                Authorization: `secret ${SECRET}`
            }
        })
            .then(res => {
                if (!res.ok) {
                    return Promise.reject(res.statusText);
                }
                console.log('result', res.json());
                return res.json();
            })
            .then(gifts => dispatch(searchGiftsSuccess(gifts)))
            .catch(err => dispatch(searchGiftsError(err)));
    };


//form.js

    class Form extend React.Component{
        onSubmit(values) {
            const inputs = Object.assign({}, values);
            return this.props.dispatch(callSearchGiftsAPI(inputs));
        }
    //Remaining code
    }

还请注意，我已经在Chrome中安装了CORS插件以允许该请求。如果我禁用它并添加模式：“ no-cors”，我将获得401的未授权身份。我还应该怎么办？ >

Answer 1

发生的事情是您正在创建一个新的Promise并返回它，但是您没有等待它解决。您可以使用新then中的async/await syntax来获得正确的结果：

onSubmit = async values => {
    const inputs = Object.assign({}, values);
    return await this.props.dispatch(callSearchGiftsAPI(inputs));
}

上面的代码将与您的第一种方法一起使用。

由于您的第二个方法不返回任何内容，因此您永远不会得到结果，因此需要返回fetch的结果并应用我在上面给出的代码：

return fetch(url, {

Answer 2

这有效。我试图将console.log放在错误的位置，因此无法正确看到响应。

export const callSearchGiftsAPI = inputs => dispatch => {
    dispatch(searchGifts());
    let url = new URL(GIFT_SEARCH_API_URL),
        params = {
            apiKey: GIFT_SEARCH_API_KEY,
            query: inputs.item,
            country: 'us',
            itemsPerPage: 3
        };
    Object.keys(params).forEach(key => url.searchParams.append(key, params[key]));
    console.log(url);

    return fetch(url, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            Authorization: `secret ${SECRET}`
        }
    })
        .then(res => {
            console.log('result');
            return res.json();
        })
        .then(response => {

            console.log(response); // changed

            dispatch(searchGiftsSuccess(response.items));
        })
        .catch(err => dispatch(searchGiftsError(err)));

无法在React中使用获取获取响应

2 个答案: