axios 源码深入分析之 HTTP 和 json-server

一、 HTTP 相关内容

前后台交互的基本过程，如下所示：

前后应用从浏览器端向服务器发送 HTTP 请求(请求报文)
后台服务器接收到请求后, 调度服务器应用处理请求, 向浏览器端返回 HTTP 响应(响应报文)
浏览器端接收到响应, 解析显示响应体/调用监视回调

HTTP 请求报文，如下：

请求行: 请求方式 /url，如下所示：
method url GET /product_detail?id=2 POST /login

多个请求头: 一个请求头由 name:value 组成, 如 Host/Cookie/Content-Type ，如下所示：

Host: www.baidu.com 
Cookie: BAIDUID=AD3B0FA706E; BIDUPSID=AD3B0FA706; 
Content-Type: application/x-www-form-urlencoded 或者 application/json

请求体，如下所示：

username=tom&pwd=123 
{
      
      "username": "tom", "pwd": 123}

HTTP 响应报文，如下所示：

响应行: 响应状态码/对应的文本，如 status statusText

多个响应头: 如 Content-Type / Set-Cookie 头，如下所示：

Content-Type: text/html;charset=utf-8
Set-Cookie: BD_CK_SAM=1;path=/

响应体，如 html 文本 /json 文本/js/css/图片

post 请求体文本参数格式，如下所示：

Content-Type: application/x-www-form-urlencoded;charset=utf-8
用于键值对参数，参数的键值用=连接, 参数之间用 & 连接
例如: name=%E5%B0%8F%E6%98%8E&age=12
Content-Type: application/json;charset=utf-8 用于json字符串参数
例如: {"name": "%E5%B0%8F%E6%98%8E", "age": 12}
Content-Type: multipart/form-data，用于文件上传请求

常见响应状态码，如下所示：

200 OK 请求成功，一般用于 GET 与 POST 请求
201 Created 已创建，成功请求并创建了新的资源
401 Unauthorized 未授权/请求要求用户的身份认证
404 Not Found 服务器无法根据客户端的请求找到资源
500 Internal Server Error 服务器内部错误，无法完成请求

不同类型的请求及其作用，如下所示；

GET: 从服务器端读取数据
POST: 向服务器端添加新数据
PUT: 更新服务器端已经数据
DELETE: 删除服务器端数据

API 的分类，如下所示：

REST API: restful，如下：
- 发送请求进行 CRUD 哪个操作由请求方式来决定
- 同一个请求路径可以进行多个操作
- 请求方式会用到 GET/POST/PUT/DELETE
非REST API: restless，如下：
- 请求方式不决定请求的 CRUD 操作
- 一个请求路径只对应一个操作
- 一般只有 GET/POST
测试: 可以使用 json-server 快速搭建模拟的 rest api 接口

二、json-server 的相关内容

json-server：用来快速搭建 REST API 的工具包。
使用 json-server，如下所示：

在线文档: https://github.com/typicode/json-server
下载: npm install -g json-server

目标根目录下创建数据库 json 文件: db.json

{
      
       
    "posts": [ {
      
       "id": 1, "title": "json-server", "author": "typicode" } ],
    "comments": [ {
      
       "id": 1, "body": "some comment", "postId": 1 } ],
    "profile": {
      
       "name": "typicode" } 
}

启动服务器执行命令: json-server --watch db.json

使用浏览器访问测试

http://localhost:3000/posts
http://localhost:3000/posts/1

使用 axios 访问测试，代码如下所示：

<!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>
  <div>
    <button onclick="testGet()">GET请求</button>
    <button onclick="testPost()">POST请求</button>
    <button onclick="testPut()">PUT请求</button>
    <button onclick="testDelete()">DELETE请求</button>
  </div>

  <script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
  <script>
    /* 1. GET请求: 从服务器端获取数据*/
    function testGet() {
     
     
      // axios.get('http://localhost:3000/posts')
      // axios.get('http://localhost:3000/posts/1')
      // 获取 id 为 1 的参数
      axios.get('http://localhost:3000/posts?id=1')
        .then(response => {
     
     
          console.log('/posts get', response.data)
        })
    }

    /* 2. POST请求: 向服务器端添加新数据*/
    function testPost() {
     
     
      // 保存数据
      axios.post('http://localhost:3000/posts', {
     
     "title": "json-server3", "author": "typicode3"})
        .then(response => {
     
     
          console.log('/posts post', response.data)
        })
    }

    /* 3. PUT请求: 更新服务器端已经数据 */
    function testPut() {
     
     
      axios.put('http://localhost:3000/posts/3', {
     
     "title": "json-server...", "author": "typicode..."})
        .then(response => {
     
     
          console.log('/posts put', response.data)
        })
    }

    /* 4. DELETE请求: 删除服务器端数据 */
    function testDelete() {
     
     
      axios.delete('http://localhost:3000/posts/3')
        .then(response => {
     
     
          console.log('/posts delete', response.data)
        })
    }

  </script>
</body>
</html>

db.json ：

{
    
    
  "posts": [
    {
    
    
      "title": "json-server+++",
      "author": "typicode+++",
      "id": 1
    },
    {
    
    
      "id": 3
    },
    {
    
    
      "title": "json-server3",
      "author": "typicode3",
      "id": 6
    },
    {
    
    
      "title": "json-server4",
      "author": "typicode4",
      "id": 7
    }
  ],
  "comments": [
    {
    
    
      "id": 1,
      "body": "some comment",
      "postId": 1
    }
  ],
  "profile": {
    
    
    "name": "typicode"
  }
}

axios 源码深入分析之 HTTP 和 json-server

一、 HTTP 相关内容

二、json-server 的相关内容

猜你喜欢