2024年Web前端最新入门基于Node的Web框架——Koa(1)，2024中级前端开发面试解答

最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

response

response对象是用于设置一些响应信息给客户端，这些和http请求的响应字段是一样的。比如说可以设置状态码、响应格式等相关信息。

app.use(async (ctx)=>{

ctx.response.status=200

if(ctx.request.accepts(‘json’)){

ctx.response.body=‘

Hello json

’

ctx.response.type = ‘json’

}else if(ctx.request.accepts(‘html’)){

ctx.response.type=‘html’

ctx.response.body=‘

Hello html!

’

}else{

ctx.response.type=‘text’

ctx.response.body = ‘hello text!’

}

})

state

The recommended namespace for passing information through middleware and to your frontend views.

引用官网的一句话，state是一个命名空间，用于通过中间件传递信息和前端视图。比如以下的代码可以把user放在state里面，传递给另一个中间件。

ctx.state.user = yield User.find(id);

cookies

ctx.cookies用于获取和设置cookie。

• 设置：

ctx.cookies.set(name, value, [options])

• 获取

ctx.cookies.get(name, [options])

其中options就是一些cookie的相关属性，如设置过期时间、路径等。具体如下：

| key | value |

| — | — |

| maxAge | cookie过期时间 |

| signed | cookie签名值 |

| expires | 过期日期 |

| path | 存储路径 |

| domain | 域名 |

| secure | 只允许https访问 |

| httpOnly | 如果是true，则js无法访问 |

| overwrite | 布尔值，是否允许覆盖以前的同名cookie |

throw

用于抛出错误，返回错误信息给用户。

app.use(async (ctx)=>{

ctx.throw(500)

})

03 Koa中间件

---

---

中间件其实可以理解成一个执行函数，函数就是实现某一种功能的方法。可能这么说不太明白。举个例子：比如你购买商品，添加购物是要在登录状态的，下单也是要在登录状态的。这里每进行一次操作都应该判断一下用户是否是登录状态，我们可以把判断是否登录状态的函数抽离出来，形成一个中间件，可以在任何地方进行复用。

中间件有两个参数，第一个就是我们上面提到的ctx，还有一个就是next参数，下面就讲一下next参数到底是怎么用的，我们先来了解一下“洋葱模型”。

router.post(‘/new’, loginCheck, otherMiddleWare, async function (ctx, next) {

const body = ctx.request.body

body.author = ctx.session.username

const data = await newBlog(body)

ctx.body = new SuccessModel(data)

})

上面这段代码的意思就是新建文章的接口，新建之前就使用了loginCheck（验证是否登录）的中间件，如果还有其他也可以写在otherMiddleWare这里。

所以next的作用就是把中间件的执行权交给下一个中间件，如果没有next的话，otherMiddleWare就不会执行。洋葱模型类似于一种栈的数据结构，遵循先进后出的原则。

我们也可以一次性引入，把中间件都以函数的形式定义，然后使用koa-compose引入，效果一样。

const compose = require(‘koa-compose’);//增加

async function middleWare1(ctx,next){

console.log(“first”)

await next()

console.log(“first end”);

}

async function middleWare2(ctx,next){

console.log(“second”)

await next()

console.log(“second end”);

}

async function middleWare3(ctx,next){

console.log(“third”)

await next()

console.log(“third end”);

}

const all = compose([middleWare1,middleWare2,middleWare3])

app.use(all)

04 常用中间件

---

---

koa-bodyparser

koa-bodyparser这个中间件可以用于解析post方法传递过来的参数，常用于表单的提交信息获取，以一个JSON对象的形式返回，可以很方便地获取数据。

const koa = require(‘koa’)

const app = new koa()

const bodyparser = require(‘koa-bodyparser’)

app.use(bodyparser())

app.use(async (ctx, next) => {

if (ctx.method === ‘GET’) {

ctx.body = `

登录

用户名

密码

提交

`

} else if (ctx.method === ‘POST’) {

let postData = ctx.request.body

console.log(postData); //{ username: ‘123’, password: ‘456’ }

}

})

app.listen(3000)

koa-router

上面介绍next的时候，代码里面有router的出现，这就是koa-router。使用这个方便获取你是使用哪一种方法，相应的逻辑也可以写在这个router里面。使用之前先安装，npm i koa-router

router.get(‘/’,(ctx, next)=>{

//

})

router.post(‘/’,(ctx, next)=>{

//获取json数据

})

koa-compose

ES6

• 列举常用的ES6特性：

• 箭头函数需要注意哪些地方？

• let、const、var

• 拓展：var方式定义的变量有什么样的bug？

• Set数据结构

• 拓展：数组去重的方法

• 箭头函数this的指向。

• 手写ES6 class继承。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

微信小程序

• 简单描述一下微信小程序的相关文件类型?

• 你是怎么封装微信小程序的数据请求？

• 有哪些参数传值的方法？

• 你使用过哪些方法，来提高微信小程序的应用速度？

• 小程序和原生App哪个好？

• 简述微信小程序原理？

• 分析微信小程序的优劣势

• 怎么解决小程序的异步请求问题？

db9a6a7a5b97f9ccba8.png)

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

微信小程序

• 简单描述一下微信小程序的相关文件类型?

• 你是怎么封装微信小程序的数据请求？

• 有哪些参数传值的方法？

• 你使用过哪些方法，来提高微信小程序的应用速度？

• 小程序和原生App哪个好？

• 简述微信小程序原理？

• 分析微信小程序的优劣势

• 怎么解决小程序的异步请求问题？