如何使用Koa2和koa-router将REST api的GET响应发送到React客户端?

时间:2016-04-24 13:45:40

标签: javascript json rest koa koa-router

我有一个使用koa和koa-router建立的REST api。我可以达到一个api终点和console.log(ctx.body),我看到了我想要和希望看到的东西。在这种情况下,我希望看到一个带有URL的json对象,这是我在控制台时在节点端看到的:

etrade_api: { oauth_token: 'hidden',
oauth_token_secret: 'hidden',
authorizeUrl: 'https://us.etrade.com/e/t/etws/authorize?key=hidden&token=hidden' }

但是,当我尝试在React中使用端点时,我在客户端上获得的响应是​​一个响应对象,如下所示:

Response {url: "http://localhost:3000/api/verification", status: 200, statusText: "OK", headers: Headers, ok: true…}
_abort:false
_raw:Array[0]
body:PassThrough
bodyUsed:false
headers:Headers
ok:true
size:0
status:200
statusText:"OK"
timeout:0
url:"http://localhost:3000/api/verification"
__proto__:Body

我的问题是如何在客户端上面的节点console.log中获取我期望的json对象?

我对koa很新,并且一直试图通过跟随其他人如何设置他们的休息api的例子来学习它。目前我的服务器如下所示:

import Koa from 'koa';
import convert from 'koa-convert';
import historyApiFallback from 'koa-connect-history-api-fallback';
import serve from 'koa-static';
import body from 'koa-better-body';
import error from 'koa-error';
import compress from 'koa-compress';
import session from 'koa-session';
import responseTime from 'koa-response-time';
import logger from 'koa-logger';
import config from '../settings/config';
import routes from './api/router/routes';


const paths = config.utils_paths;
const app = new Koa();

app.keys = ['somethin up in here'];

app.use(responseTime());
app.use(error());
app.use(logger());
app.use(convert(session(app)));

// Setup api routes
app.use(body());
routes(app);

// This rewrites all routes requests to the root /index.html file
// (ignoring file requests). If you want to implement isomorphic
// rendering, you'll want to remove this middleware.
app.use(convert(historyApiFallback({
    verbose: false
})));

app.use(convert(serve(paths.client('static'))));
app.use(compress());
app.listen(3000);

我的路线文件如下所示:

import Router from 'koa-router';
import account_routes from '../accounts'; //import controllers

export default function (app) {
    const router = new Router({
        prefix: '/api'
    });

    account_routes(router);

    app.use(router.routes());
    app.use(router.allowedMethods());
}

最后我的控制器如下所示:

import etApi from '../etrade_api';

export default function(router){
    router.get('/verification', getEtradeVerificationLink);
    // other routes here
}

async function getEtradeVerificationLink( ctx, next ) {
    const myKey = 'hidden';
    const mySecret = 'hidden';

    try {
        ctx.body = await etApi.requestToken(myKey, mySecret);
        console.log('etrade_api:', ctx.body); // this prints out what I expect to see
    }
    catch ( error ) {
        console.error('Failed to get verification link.', error);
    }
}

感谢您查看此内容并提供任何帮助。

1 个答案:

答案 0 :(得分:0)

@ pe8ter让我走上了正确的道路。事实证明我的服务器端代码没有问题,这是我的客户端代码。我使用fetch来使用api,但我没有处理fetch正确返回的承诺。我需要做的就是改变我的客户端代码:

RewriteCond %{REMOTE_ADDR} !^1\.2\.3\.4 [OR]
RewriteCond %{REMOTE_ADDR} !^1\.2\.3\.5
RewriteRule ^admin/ - [L,R=403]

我将代码更改为此以处理来自fetch的响应:

$args = array(
    'posts_per_page'    => -1,
    'post_type'         => 'post',
    'post_status'       => 'publish',
    'author'            => $current_user_id,
    'meta_key'          => 'color',
    'meta_value'        => array('red', 'blue')
);

$posts_query = new WP_Query($args);
$the_count = $posts_query->post_count;

echo $the_count;

现在一切都按预期工作了。谢谢你的帮助!