Egg 基本 HTTP 请求

vienceTang
1,289 阅读3分钟

本文已参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金。

心若有所向往 何惧道阻且长

持续更新中...

系列文章传送门：

GET

在之前的文章中，我们在路由中配置了几个页面，通过一个 URL 来访问一个地址，进行查看返回值就是 GET 请求。 GET 请求是 HTTP 中最常见的的一种，请求的参数也是最容易构造的，一般用于请秋数据

  • 优点：使用简单，清晰有条理。
  • 缺点：传递参数大小限制，安全性差，不能完成重要的数据的传递
  • 分类：自由传参模式/严格传参模式（Restful 风格）

自由传参模式

自由传参模式就是在键值对的方式

?id=123&name=vience

在本文中，我们需要在 controller 下创建一个新文件为 article.js 文件，在 article.js 中的 getId 方法用来获取文章的唯一标识ID，在 GET 请求自由传参模式中我们通过 ctx.query 获取参数

代码如下

'use strict';

const Controller = require('egg').Controller;

class ArticleController extends Controller {
  // GET 请求
  // 自由传参模式
  async getId() {
    const { ctx } = this;
    console.log(ctx.query);
    ctx.body = `id is ${ctx.query.id}`;
  }
}

在 app/router.js 中添加

// 访问路径: http://127.0.0.1:7001/getId?id=0001
router.get('/getId', controller.article.getId);

效果（GET 请求可以直接在浏览气访问查看效果）

GET自由传参模式

严格传参模式

严格传参模式就是在路径后买面之恶极写参数值，传递的参数个数和顺序都是固定的，参数少传或者多传都会报错

detail/title/id

我们继续在 article.js 中编写方法来演示严格传参模式，detail 方法用来获取文章的详情，在 GET 请求严格传参模式中我们通过 ctx.params 获取参数

// 严格传参模式
async detail() {
  const { ctx } = this;
  console.log(ctx.params);
  ctx.body = `title is ${ctx.params.title}, id is ${ctx.params.id}`
}

在 app/router.js 中配置上面方法的路由地址

// 访问路径: http://127.0.0.1:7001/detail/尤雨溪都不知道的100个vue小知识/0001
  router.get('/detail/:title/:id', controller.article.detail);

效果

GET 严格传参模式

POST

创建数据的场景（例如表单提交、图片上传等）一般来说都会使用 POST 请求，它相对于 GET 来说多了请求 body 这个参数。

我们继续在 article.js 中编写方法来演示 POST 请求，add 方法用来新增文章。

代码如下

// POST 请求
async add() {
  const { ctx } = this;
  console.log(ctx.request.body);
  ctx.body = {
    code: 200,
    message: 'succcess',
    data: ctx.request.body
  }
}

在 app/router.js 中配置上面方法的路由地址

router.post('/add', controller.article.add);

但是 POST 请求无法使用浏览器直接访问，这时我们就需要用到一些工具来测试接口了，一般可以使用 Postman 来测试，这里我给大家介绍以一个 VS code 小插件 REST Client，在安装完成后，我们在任意位置创建一个以.http 结尾的文件，就可以在里面通过下面代码测试接口。

POST http://127.0.0.1:7001/add
Content-Type: application/json

{
  "title": "egg 项目的请求方式",
  "author": "vience",
  "date": "2021-10-20"
}
  • POST：请求方法
  • http://127.0.0.1:7001/add： URL 地址
  • Content-Type：参数格式
    • application/json：表示参数是JSON对象数据
    • application/x-www-form-urlencoded：表示参数是表单数据

在编写完成后点击 Send Request 进行测试

效果

403

这是我们的发现请请求返回 403 Forbidden，这是因为 EGG项目默认开启 CSRF安全策略，我们这是需要把这个进行关闭

CSRF 的全名为 Cross-site request forgery， 中文名为 伪造跨站请求。

打开 /config/config/default.js 文件，在第21行添加

// CSRF enable false
config.security = {
  csrf: {
    enable: false
  }
}

这时安全策略就被关闭了，我们继续点击 Send Request 发送请求查看结果

POST

其他

除了常用的 GET 、 POST 请求还有 PUT DELET 请求

  • PUT 与 POST 类似，更加适合更新数据和替换数据的语义。 除了 method 参数需要设置为 PUT，其他参数几乎跟 POST 一模一样。
  • 删除数据会选择 DELETE 请求，通常可以不需要加请求 body。

这里给出代码，就不一样演示了

// PUT 请求
async update() {
    const { ctx } = this;
    console.log(ctx.params);
    ctx.body = {
        id: ctx.params.id
    };
}

// DELETE 请求
async delete() {
    const { ctx } = this;
    console.log(ctx.params);
    ctx.body = {
        id: ctx.params.id
    };
}

在 app/router.js 中添加

router.put('/update/:id', controller.article.update);
router.delete('/delete/:id', controller.article.delete);

写在最后

关注我，更多内容持续输出

🌹 喜欢就点个赞吧👍🌹

🌹 觉得有收获的，可以来一波 收藏+关注，以免你下次找不到我😁🌹

🌹欢迎大家留言交流，批评指正，转发请注明出处，谢谢支持！🌹

avatar
文章
阅读
粉丝