koa2 入坑(1)之处理get/post请求

一、安装

要求Node.js版本高于V7.6。因为node.js 7.6版本开始完全支持async/await,不需要再加flag,所以才能完全你支持我们的Koa2。

npm install --save koa

demo:

const Koa = require('koa');
const app = new Koa();

app.use(async(ctx)=>{
    ctx.body = 'hello koa2';
});

app.listen(3000);
console.log('http://127.0.0.1:3000');

Koa 提供一个 Context 对象,表示一次对话的上下文(包括 HTTP 请求和 HTTP 回复)。通过加工这个对象,就可以控制返回给用户的内容。简写 ctx
ctx.body 就是发送给web的对象 页面中打印出 ctx

image.png

  • async/await的使用方法
  • async是声明一个方法是异步的,await是等待异步方法完成
  • 注意的是await必须在async方法中才可以使用因为await访问本身就会造成程序停止堵塞,所以必须在异步方法中才可以使用
  • async到底起什么作用?
    async是让方法变成异步,这个很好理解,关键是他的返回值是什么?我们得到后如何处理?

根据以前的经验,我们希望用return直接返回async函数的值,但是如果真是这样,还有await什么作用,我们写段代码测试一下。

async function testAsync(){
    return 'Hello async';
}
const result = testAsync();
console.log(result);
image.png

可以看到返回的是一个Promise对象,对象里面是定义函数的 ·return的返回值

  • await在等什么?

await一般在等待async方法执行完毕,但是其实await等待的只是一个表达式,这个表达式在官方文档里说的是Promise对象,可是它也可以接受普通值。我们写一段代码来验证一下这个结果。

function getSomething(){
    return 'something';
}

async function testAsync(){
    return 'Hello async';
}

async function test(){
    const v1=await getSomething(); // 普通值
    const v2=await testAsync(); // Promise对象
    console.log(v1,v2);
}

test();
image.png
  • async/await 同时使用

通过前面两个例子已经分别了解async和await,我们来作个虚假的例子,看一下等待问题。这只是一个虚假的,实际项目中多是去后台请求数据,等数据回来后进行执行。

function takeLongTime() {
    return new Promise(resolve => {
        setTimeout(() => resolve("long_time_value"), 2000);
    });
}

async function test() {
    const v = await takeLongTime();
    console.log(v);
}

test();

image.png

可以看到 并没有发生阻塞 这正是 async await的作用~~~

三、处理get请求

query和querystring区别

在koa2中GET请求通过request接收,但是接受的方法有两种:query和querystring。

  • query:返回的是格式化好的参数对象。
  • querystring:返回的是请求字符串。
const Koa = require('koa');
const app = new Koa();

app.use(async(ctx)=>{
    // ctx.body = 'hello';
    let url = ctx.url;
    let request = ctx.request;
    let req_query = request.query;
    let req_queryString = request.querystring;

    ctx.body = {
        url,
        req_query,
        req_queryString
    }
});

app.listen(3000,()=>{
    console.log('http://127.0.0.1:3000');
});

image.png

json 格式化插件 JSON Formatter

直接从ctx中获取Get请求

const Koa = require('koa');
const app = new Koa();

app.use(async(ctx)=>{
    // 从request 中接收get请求
    let url = ctx.url;
    let request = ctx.request;
    let req_query = request.query;
    let req_queryString = request.querystring;

    // 从上下文中ctx 直接获取get请求
    let ctx_query = ctx.query;
    let ctx_querystring = ctx.querystring;

    ctx.body = {
        url,
        req_query,
        req_queryString,
        ctx_query,
        ctx_querystring,
    }
});

app.listen(3000,()=>{
    console.log('http://127.0.0.1:3000');
});

image.png
二、处理POST请求

获取Post请求的步骤:

  • 解析上下文ctx中的原生nodex.js对象req。
  • 将POST表单数据解析成query string-字符串.(例如:user=gershon&age=18)
  • 将字符串转换成JSON格式。
const Koa = require('koa');
const app = new Koa();

app.use(async (ctx) => {
    if (ctx.url === '/' && ctx.method === 'GET') {
        //显示表单页面
        let html = `
            <h2>koa2 request POST</h2>
            <form method="post" action="/">
            <p>userName</p> 
            <input name="userName">  <br>
            <p>age</p>
            <input name="age">
            <p>website</p>    
            <input name="website">    
            <button type="submit">submit</button> 
            </form>
        `;
        ctx.body = html;

    } else if (ctx.url === '/' && ctx.method === 'POST') {
        let postData = await parsePostData(ctx);
        ctx.body = postData;

    } else {
        ctx.body = '<h1>404<h1>'
    }

    function parsePostData() {
        return new Promise((resolve, reject) => {
            try {
                let postData = '';
                ctx.req.addListener('data', (data) => { // 有数据传入的时候
                    postData += data;
                });
                ctx.req.on('end', () => {
                    let parseData = parseQueryStr(postData);
                    resolve(parseData);
                });
            } catch (e) {
                reject(e);
            }
        })
    }

    // 处理 string => json
    function parseQueryStr(queryStr) {
        let queryData = {};
        let queryStrList = queryStr.split('&');
        console.log('queryStrList',queryStrList);
        console.log('queryStrList.entries()',queryStrList.entries());
        for(let [index,queryStr] of queryStrList.entries()){
            let itemList = queryStr.split('=');
            console.log('itemList',itemList);
            queryData[itemList[0]] = decodeURIComponent(itemList[1]);
        }
        return queryData;
    }
});
app.listen(3000, () => {
    console.log('http://127.0.0.1:3000');
});
image.png
image.png

阮一峰 koa教学
jsPang koa教学

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,440评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,814评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,427评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,710评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,625评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,014评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,511评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,162评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,311评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,262评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,278评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,989评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,583评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,664评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,904评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,274评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,856评论 2 339

推荐阅读更多精彩内容

  • 框架提出的背景 ES6/7带来的变革 自ES6确定和ES7中async/await开始普及,Node的发展变得更加...
    宫若石阅读 8,472评论 1 14
  • 异步编程对JavaScript语言太重要。Javascript语言的执行环境是“单线程”的,如果没有异步编程,根本...
    呼呼哥阅读 7,290评论 5 22
  • async 函数 含义 ES2017 标准引入了 async 函数,使得异步操作变得更加方便。 async 函数是...
    huilegezai阅读 1,256评论 0 6
  • 弄懂js异步 讲异步之前,我们必须掌握一个基础知识-event-loop。 我们知道JavaScript的一大特点...
    DCbryant阅读 2,690评论 0 5
  • 濛濛薄云依旧在,风声细雨已逝去。 苏醒吮吸宓宓丝,楼下游人莫等闲。
    以行阅读 194评论 1 2