axios核心内容（一）HTTP相关

最新推荐文章于 2024-08-23 09:19:08 发布

刀月一人捕快

最新推荐文章于 2024-08-23 09:19:08 发布

阅读量276

点赞数

文章标签： http 服务器笔记 ajax 交互

本文链接：https://blog.csdn.net/m0_53989829/article/details/130510079

版权

文章详细介绍了HTTP请求交互的过程，包括请求行、请求头、请求体和响应报文的组成部分。讲解了POST请求体的不同参数格式，并列举了常见的HTTP响应状态码。此外，还阐述了GET、POST、PUT、DELETE等请求类型的作用。最后，通过json-server演示了如何搭建和使用RESTAPI，包括CRUD操作及axios的API调用示例。

摘要由CSDN通过智能技术生成

1. MDN文档

https://developer.mozilla.org/zh-CN/

2. HTTP请求交互的基本过程

从客户端（网页）发送请求到服务器

客户端向服务器发送请求时包含请求行、请求头、请求体
在这里插入图片描述

服务器接收处理请求，响应到客户端（网页）

服务器响应处理包括：状态行（响应行）、响应头、实体内容（响应体）

（1）前后应用从浏览器端向服务器发送HTTP请求（请求报文）

（2）请求报文包括请求行、请求头、请求体

（3）后台服务器接收到请求后，调度服务器应用处理请求，向浏览器端返回HTTP响应（响应报文），响应报文包括状态行、响应头、实体内容

（4）浏览器端接收到响应，解析显示响应体/调用监视回调

3.HTTP请求报文

（1）请求行：method url

其中method是请求方式，url是请求地址

例如： GET /product_detail?id=2 、 POST /login

（2）请求头：（可以多个请求头）

Host: www.baidu.com

Cookie: BAIDUID=AD3B0FA706E;BIDUPSID=AD3B0FA706;（浏览器交给服务器）

Content-Type:
application/x-www-form-urlencoded或者application/json （请求体内容类型格式）

（3）请求体：
（不是一定要有，get请求的时候没有，post请求的时候有，需要携带参数数据的时候就有）

username=tom&pwd=123 （urlencoded格式）
{“username”:“tom”,“pwd”:123} （json格式）

4. HTTP响应报文

（1）响应状态行：status statusText （状态码状态文本）

（2）多个响应头：

Content-Type:text/html;charset=utf-8 （响应体文本类型，其中text/html指的是html文本；字符集编码）

Set-Cookie:BD_CK_SAM=1;path=/

（3）响应体

html 文本/json 文本/js/css/图片…

5. post请求体参数格式

（1）Content-Type: application/x-www-form-urlencoded;charset=utf-8

用于键值对参数，参数的键值用=连接，参数之间用&连接

例如：name=%E5%B0%8F%E6%98%8E&age=12

（2）Content-Type: application/json;charset=utf-8

用于json字符串参数

例如：{“name”:"%E5%B0%8F%E6%98%8E","age":12}

（3）Content-Type: multipart/form-data

用于文件上传请求

6. 常见的响应状态码

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

7. 不同类型的请求及其作用

请求类型	作用
GET	从服务器端读取数据
POST	向服务器添加新数据
PUT	更新服务器端已加数据
DELETE	删除服务器端数据

8. API的分类

CRUD指的是做增加（create）、读取（read）、更新（update）、删除（delete）

（1）REST API： restful

发送请求进行CRUD哪个操作由请求方式来决定
同一个请求路径可以进行多个操作
请求方式会用到GET/POST/PUT/DELETE

（2）非REST API： restless

请求方式不决定请求的CRUD操作
一个请求路径只对应一个操作
一般只有GET/POST

9. 使用json-server搭建REST API

（1）登录github，在搜索框中查找json-server👇

在这里插入图片描述

在这里插入图片描述
选择star最多的👇，到https://github.com/typicode/json-server

在这里插入图片描述
可以看到👇

在这里插入图片描述

在这里插入图片描述
（2）安装

npm install -g json-server

需要全局安装，不然json-server会报错

在这里插入图片描述
出现如下提示👇，表示安装成功

在这里插入图片描述
（3）创建db.json并指定数据

在这里插入图片描述
db.json内容如下👇

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

（4）运行命令
在这里插入图片描述

json-server --watch db.json

在这里插入图片描述
http://localhost:3000显示如下👇

在这里插入图片描述
（5）使用浏览器进行访问测试

http://localhost:3000/posts/1 （直接定位）

http://localhost:3000/posts?id=1 （过滤）

（6）使用axios访问测试

<body>
  <div>
    <button onclick="testGet()">GET请求</button>
    <button onclick="testPost()">POST请求</button>
    <button onclick="testPut()">PUT请求</button>
    <button onclick="testDelete()">DELETE请求</button>
  </div>
  <!-- 导入axios库 -->
  <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
  <script>
    function testGet () { // GET请求
      axios.get('http://localhost:3000/posts')
        .then(response => {
          console.log('/posts_get', response.data);
        })
    }
    function testPost () { // POST请求
      axios.post('http://localhost:3000/posts', {
        "title": "json-server3",
        "author": "typicode3"
      })
        .then(response => {
          console.log('/posts_post', response.data);
        })
    }
    function testPut () { // PUT请求
      axios.put('http://localhost:3000/post3', {
        "title": "json-server000",
        "author": "typicode000"
      })
        .then(response => {
          console.log('/posts_put', response.data);
        })
    }
    function testDelete () { // DELETE请求
      axios.delete('http://localhost:3000/posts/3')
        .then(response => {
          console.log('/posts_delete', response.data);
        })
    }
  </script>
</body>