利用koa打造jsonp API

概述

最近學習利用koa搭建API接口，小有所得，如今記錄下來，供之後開發時參考，相信對其餘人也有用。

就目前我所知道的而言，API有2種，一種是jsonp這種API，前端經過ajax來進行跨域請求得到數據；另外一種是restful API，前端經過fetch或者axios進行cors請求來得到數據。

本篇博文記錄我用koa打造的jsonp API。

參考資料：《Koa2進階學習筆記》，KOA docs

建一個服務器

首先用koa來建一個服務器，在這個過程當中，咱們用到了koa-logger中間件，它會在服務端顯示各類請求操做記錄，便於咱們開發和調試。

//app.js
'use strict'
const Koa = require('koa');
const logger = require('koa-logger');

const app = new Koa();

app.use(logger());

app.listen(3000, () => {
    console.log('koa starts at port 3000!');
})

注意：若是不能運行的話，就換一個端口！

babel

根據官網文檔，若是node版本大於7.6，就能夠無痛使用async方法，不然要加入babel-register庫和transform-async-to-generator庫，而且在app.js裏面加入以下代碼：

require('babel-register');

並且要在.babel文件中，至少有以下代碼：

{
  "plugins": ["transform-async-to-generator"]
}

路由

咱們須要給jsonp的API新建一個路由，這樣就不影響其它路由了。（咱們可能會在其它路由搭建restful api，也可能在其它路由搭建靜態頁面等等。）

'use strict'
const Koa = require('koa');
const logger = require('koa-logger');
const Router = require('koa-router');

const app = new Koa();

app.use(logger());

// 子路由1：主頁
let routerHome = new Router();
routerHome.get('/', async (ctx) => {
    ctx.body = '歡迎歡迎！';
})

// 子路由2：jsonp api
let routerJsonp = new Router();
routerJsonp.get('/data1', async (ctx) => {
    ctx.body = '數據';
})

// 裝載全部路由
let router = new Router();
router.use('/', routerHome.routes(), routerHome.allowedMethods());
router.use('/jsonp', routerJsonp.routes(), routerJsonp.allowedMethods());
app.use(router.routes()).use(router.allowedMethods());

app.listen(3000, () => {
    console.log('koa starts at port 3000!');
})

如今，先用node運行app.js文件，而後用瀏覽器訪問http://localhost:3000/會看到歡迎歡迎四個字，訪問http://localhost:3000/jsonp/data1會看到數據兩個字。

jsonp

jsonp的機制是，咱們傳給服務器一個callback參數，值是咱們要調用的函數名字，而後服務器返回一個字符串，這個字符串不單單是須要返回的數據，並且這個數據要用這個函數名字包裹。

因此咱們須要作以下事情：

1. 解析請求所帶的參數，而且讀取callback參數的值。解決方法是，咱們用ctx.request.query得到請求所帶的全部參數，而後讀取出callback參數：ctx.request.query.callback。
2. 把數據轉化爲字符串，並用這個函數名包裹。這個很簡單，字符串鏈接便可。

代碼以下：

'use strict'
const Koa = require('koa');
const logger = require('koa-logger');
const Router = require('koa-router');

const app = new Koa();

app.use(logger());

// 子路由1：主頁
let routerHome = new Router();
routerHome.get('/', async (ctx) => {
    ctx.body = '歡迎歡迎！';
})

// 子路由2：jsonp api
let routerJsonp = new Router();
routerJsonp.get('/data1', async (ctx) => {
    let cb = ctx.request.query.callback;
    ctx.type = 'text';
    ctx.body = cb + '(' + '"數據"' + ')';
})

// 裝載全部路由
let router = new Router();
router.use('/', routerHome.routes(), routerHome.allowedMethods());
router.use('/jsonp', routerJsonp.routes(), routerJsonp.allowedMethods());
app.use(router.routes()).use(router.allowedMethods());

app.listen(3000, () => {
    console.log('koa starts at port 3000!');
})

最後用node運行app.js文件就大功告成了！！！咱們首先在控制檯引入jquery庫，而後調用jquery的ajax方法，進行jsonp請求，就能得到「數據」了。

首先咱們在瀏覽器的控制檯引入jquery庫：

var myScript = document.createElement('script');
myScript.src = 'https://cdn.bootcss.com/jquery/3.3.1/jquery.js';
document.getElementsByTagName('head')[0].appendChild(myScript);

而後用ajax方法進行jsonp跨域請求數據，就能夠在控制檯看到「數據」二個字了。

$.ajax({
    url : 'http://localhost:3000/jsonp/data1',
    dataType : 'jsonp',
    type : 'get',
    success : function(res){
        console.log(res);
    },
    error: function() {
        alert("網絡出現錯誤，請刷新！");
    }
});

注意：因爲原頁面是http頁面，因此不能在https頁面進行jsonp跨域請求。找一個http頁面進行jsonp跨域請求測試吧。