回调相关案例
async function test(){
return "测试";
}
console.log(test()) //Promise { '测试' }
function test(){
return "测试";
}
console.log(test()) //'测试'
async function test(){
return "测试";
}
let p=test();
p.then((data)=>{
console.log(data)//测试
})
let fs=require("fs");
async function readTxt(){
let info=await new Promise((resolve,reject)=>{
fs.readFile('./package.json',function(err,data){
resolve(data.toString());
})
})
console.log(info);//输出文件内容
}
readTxt();
说明：await必须使用在async中，async返回的是一个promise。被async修饰的函数，是异步函数,不会阻塞下面代码的执行。
Koa
获取get传值
- 接收get传值，ctx有query(格式话好的参数对象)和querystring(请求字符串)两种方式,两种都是属性不是方法
- 也可以通过ctx.requset.query/querystring获取
- 还可以通过ctx.url/ctx.request.url间接获取('/?aid=30&name=zhangsan')
动态路由
router.get('/news/:aid',async(ctx)=>{
//http://127.0.0.1:3000/news/asfnca
console.log(ctx.params);//{ aid: 'asfnca' }
ctx.body="新闻页面"+ctx.params.aid;
})
router.get('/news/:aid/:cid',async(ctx)=>{
//http://127.0.0.1:3000/news/asfnca/asdfsa
console.log(ctx.params);//{ aid: 'asfnca', cid: 'asdfsa' }
ctx.body="新闻页面"+ctx.params.aid+".."+ctx.params.cid;
})
中间件
- 应用级中间件代码位置不论在哪里，都是先执行完应用级中间件才开始走路由和路由级中间件
- 匹配路由之前或匹配之后所完成的一系列的操作。
const koa = require('koa'),
router = require('koa-router')(),
app = new koa();
//只写一个参数，表示匹配所有路由
app.use(async (ctx, next) => {
console.log(Date.now())
//应用级中间件
next();
//错误处理中间件
if(ctx.status==404){
ctx.status=404;
ctx.body="404";
}
})
//配置路由
router.get('/', async (ctx,next) => {
ctx.body = "首页";
//路由级中间件
await next();
})
router.get('/news/:aid', async (ctx) => {
ctx.body = "新闻页面";
})
app.use(router.routes())
.use(router.allowedMethods());
app.listen(3000);
洋葱图
koa洋葱图.png
ejs模板
- 所有模板引擎使用都需要预先安装koa-views
- cnpm i koa-views --save
- cnpm i ejs --save
模板引擎引入有两种方式
方式一：
views=require('koa-views')
app.use(views('views',{
extension:'ejs'
}));
说明：该种方式设置模板引擎必须设置模板文件后缀名为.ejs
方式二：
app.use(views('views',{map:{html:'ejs'}}));
说明：该种方式配置模板，后缀名是.html
ejs模板语法
index.ejs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 引入外部头部 -->
<% include public/header.ejs %>
<ul>
<% for(let a=0;a<arr.length;a++){%>
<li>
<%=arr[a]%>
</li>
<%}%>
</ul>
<!-- 绑定html字符串 -->
<%-htmls%>
判断语句
<%if(flag) { %>
<div>true</div>
<%}else{%>
<div>false</div>
<%}%>
<!-- 公共数据 -->
<%=names%>
<%=age%>
</body>
</html>
header.ejs:
<h2><%=title%></h2>
index.js中的数据配置：
全局数据：
//ejs渲染公共数据
app.use(async(ctx,next)=>{
ctx.state={
names:"qiang",
age:12
}
await next();
})
局部数据：
//渲染界面并且传递
await ctx.render('index',{
title:"标题信息",
arr:["a","b","c","d"],
htmls:"<h2>H2标签</h2>",
flag:true
});
ejs截图.png
网友评论