iKcamp｜基於Koa2搭建Node.js實戰（含視頻）? HTTP請求

POST/GET請求——常見請求方式處理

???? iKcamp 製作團隊

原創作者：大哼、阿干、三三、小虎、胖子、小哈、DDU、可木、晃晃

視頻剪輯：小溪里

滬江CCtalk視頻地址：https://www.cctalk.com/v/15114357765870

文章

Http 請求

在學習了 koa-router 之後，我們就可以用它來處理一些常見的請求了，比如 POST/GET 。

<br/>

koa-router 提供了 .get、.post、.put 和 .del 介面來處理各種請求，但實際業務上，我們大部分只會接觸到 POST 和 GET，所以接下來只針對這兩種請求類型來說明。

<br/>

當我們捕獲到請求後，一般都需要把請求帶過來的數據解析出來。數據傳遞過來的方式一般有三種：

<br/>

請求參數放在 URL 後面

http://localhost:3000/home?id=12&name=ikcampn

<br/>

koa-router 封裝的 request 對象，裡面的 query 方法或 querystring 方法可以直接獲取到 Get 請求的數據，唯一不同的是 query 返回的是對象，而 querystring 返回的是字元串。

修改 app.js，我們加入解析方式：

const Koa = require(koa)n const router = require(koa-router)()n const app = new Koa()nn router.get(/, async(ctx, next) => {n ctx.response.body = `<h1>index page</h1>`n })nn router.get(/home, async(ctx, next) => {n console.log(ctx.request.query)n console.log(ctx.request.querystring)n ctx.response.body = <h1>HOME page</h1>n })nn router.get(/404, async(ctx, next) => {n ctx.response.body = <h1>404 Not Found</h1>n })nn // add router middleware:n app.use(router.routes())nn app.listen(3000, () => {n console.log(server is running at http://localhost:3000)n })n

<br/>

運行代碼，並通過瀏覽器訪問 http://localhost:3000/home?id=12&name=ikcamp，然後打開控制台會看到下面的輸出內容：

{ id: 12, name: ikcamp }nid=12&name=ikcampn

<br/>

請求參數放在 URL 中間

http://localhost:3000/home/12/ikcampn

<br/>

這種情況下，解析方式肯定與上面的不一樣了，koa-router 會把請求參數解析在 params 對象上，我們修改 app.js 文件，增加新的路由來測試下：

// 增加如下代碼n router.get(/home/:id/:name, async(ctx, next)=>{n console.log(ctx.params)n ctx.response.body = <h1>HOME page /:id/:name</h1>n })n

<br/>

運行代碼，並通過瀏覽器訪問 http://localhost:3000/home/12/ikcamp，然後查看下控制台顯示的日誌信息：

{ id: 12, name: ikcamp }n

<br/>

請求參數放在 body 中

<br/>

當用 post 方式請求時，我們會遇到一個問題：post 請求通常都會通過表單或 JSON 形式發送，而無論是 Node 還是 Koa，都 沒有提供 解析 post 請求參數的功能。

<br/>

koa-bodyparser 說：『是時候登場了！』

<br/>

首先，安裝 koa-bodyparser 包：

npm i koa-bodyparser -Sn

<br/>

安裝完成之後，我們需要在 app.js 中引入中間件並應用：

const Koa = require(koa)n const router = require(koa-router)()n const bodyParser = require(koa-bodyparser)n const app = new Koa()nn app.use(bodyParser())nn router.get(/, async(ctx, next) => {n ctx.response.body = `<h1>index page</h1>`n })nn router.get(/home, async(ctx, next) => {n console.log(ctx.request.query)n console.log(ctx.request.querystring)n ctx.response.body = <h1>HOME page</h1>n })nn router.get(/home/:id/:name, async(ctx, next)=>{n console.log(ctx.params)n ctx.response.body = <h1>HOME page /:id/:name</h1>n })nn router.get(/404, async(ctx, next) => {n ctx.response.body = <h1>404 Not Found</h1>n })nn app.use(router.routes())nn app.listen(3000, () => {n console.log(server is running at http://localhost:3000)n })n

然後我們來試著寫一個簡單的表單提交實例。修改 app.js 增加如下代碼，實現增加表單頁面的路由：

// 增加返回表單頁面的路由n router.get(/user, async(ctx, next)=>{n ctx.response.body = n `n <form action="/user/register" method="post">n <input name="name" type="text" placeholder="請輸入用戶名：ikcamp"/> n <br/>n <input name="password" type="text" placeholder="請輸入密碼：123456"/>n <br/> n <button>GoGoGo</button>n </form>n `n })n

<br/>

繼續修改 app.js 增加如下代碼，實現 post 表單提交對應的路由：

// 增加響應表單請求的路由n router.post(/user/register,async(ctx, next)=>{n let {name, password} = ctx.request.bodyn if( name === ikcamp && password === 123456 ){n ctx.response.body = `Hello， ${name}！`n }else{n ctx.response.body = 賬號信息錯誤n }n })n

<br/>

常見的幾種請求，以及相應的參數傳遞解析，我們已經學習過了。下一節中，我們會把項目整理重構下，做個分層，並引入視圖層。

下一篇：代碼分層——梳理代碼，漸近於 MVC 分層模式

http://weixin.qq.com/r/MjoLExLEsU-OrVZw928g (二維碼自動識別)

上一篇：iKcamp新課程推出啦～～～～～iKcamp｜基於Koa2搭建Node.js實戰（含視頻）? 路由koa-router

推薦： 翻譯項目Master的自述：

1. 乾貨｜人人都是翻譯項目的Master

2. iKcamp出品微信小程序教學共5章16小節匯總(含視頻)

推薦閱讀：