axios学习笔记(一):学习HTTP相关的技术知识点

691 阅读3分钟

**HTTP是一种能够获取如 HTML 这样的网络资源的 **protocol(通讯协议)。它是在 Web 上进行数据交换的基础,是一种 client-server 协议,也就是说,请求通常是由像浏览器这样的接受方发起的。一个完整的Web文档通常是由不同的子文档拼接而成的,像是文本、布局描述、图片、视频、脚本等等。

image.png

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

image.png

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

2. HTTP请求报文

  1. 请求行:method  url: GET/url,  POST/url
  2. 多个请求头

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

  1. 请求体

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

3. HTTP响应报文

  1. 响应状态行: status statusText
  2. 多个响应头
    Content-Type: text/html;charset=utf-8
    Set-Cookie: BD_CK_SAM=1;path=/
  3. 响应体
    html 文本/json 文本/js/css/图片..

4. post请求体参数格式

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

用于键值对参数,参数的键值用=连接,参数之间用&连接
例如: name=%E5%B0%8F%E6%98%8E&age=12

  1. Content-Type:application/json;charset=utf-8

用于 json 字符串参数
例如: {"name": "%E5%B0%8F%E6%98%8E", "age": 12}

  1. Content-Type: multipart/form-data

用于文件上传请求

5. 常见的响应状态码

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

6. 不同类型的请求及作用

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

7. API的分类

  1. REST API: restful
    (1) 发送请求进行CRUD哪个操作由请求方式来决定

(2) 同一个请求路径可以进行多个操作
     (3) 请求方式会用到GET/POST/PUT/DELETE

  1. 非 REST API: restless
    (1) 请求方式不决定请求的CRUD操作

(2) 一个请求路径只对应一个操作
     (3) 一般只有GET/POST

9. 使用 **json-server **搭建 REST API

9.1 json-server是什么**?**

用来快速搭建 REST API 的工具包

9.2 如何使用json-server

  1. 全局安装json-server

npm install -g json-server

  1. 目标根目录下创建数据库json文件:db.json
{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
], "comments": [
{ "id": 1, "body": "some comment", "postId": 1 } ],
"profile": { "name": "typicode" } }
  1. 启动服务器执行命令

json-server --watch db.json

image.png

总结:

本篇文章主要分享了有关http相关的技术知识点,为后期的学习axios打下基础。如果想了解更多请扫描二维码,关注公众号。

qrcode_for_gh_4d3763fa9780_258 (1).jpg