axiosソースコードHTTPとjson-serverの詳細な分析

1.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
key =パラメータとの&接続、パラメータ間のパラメータの接続
例：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要求は、一般的に使用し、成功している要求GETPOST
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操作を決定しません
- リクエストパスは1つの操作にのみ対応します
- 一般的にのみ GET/POST
テスト：json-serverアナログrest apiインターフェースをすばやく構築できます

2.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の詳細な分析

1.HTTP関連のコンテンツ

2.json-serverの関連コンテンツ

おすすめ