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

深藏阁楼爱情的钟 2023-02-20 13:56 35阅读 0赞

#### 一、 HTTP 相关内容 ####

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

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

1.  `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}

1.  `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/图片`

1.  `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`，用于文件上传请求

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

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

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

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

1.  `API` 的分类，如下所示：

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

#### 二、json-server 的相关内容 ####

1.  `json-server`：用来快速搭建 `REST API` 的工具包。
2.  使用 `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`

1.  使用浏览器访问测试

*  `http://localhost:3000/posts`
 *  `http://localhost:3000/posts/1`

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"
      }
    }