使用axios封装AJAX

news2024/10/7 15:09:25

一、Http 请求报文

包括了三部分：求情行、请求头，请求体。
在这里插入图片描述

1、请求行：
是HTTP请求的第一行，包含了请求方法、请求目标和HTTP协议版本。常用的请求方法有GET、POST、PUT、DELETE等，用于指定客户端希望服务器执行的操作。请求目标是指请求的资源路径，可以是一个具体的文件路径或者是一个URL。HTTP协议版本通常是HTTP/1.1。
请求类型：
在这里插入图片描述

2、请求头：
请求头包含了客户端向服务器传递的额外信息，以键值对的形式表示。常见的请求头有以下几种：请求头可以包含多个。

Host：指定服务器的主机名和端口号。
User-Agent：标识客户端的类型和版本信息，用于服务器识别客户端。
Accept：指定客户端能够接受的响应内容类型。
Content-Type：指定请求体的数据类型，常用的有application/json、application/x-www-form-urlencoded等。
Authorization：用于身份验证，包含了客户端的身份凭证。
除了上述常见的请求头，还有很多其他的请求头可以用于传递不同的信息，具体使用取决于需求。
Cookie: 携带cookie数据。

3、请求体：
请求体是可选的，用于传递客户端向服务器发送的数据。它通常用于POST、PUT等请求方法，用于传递表单数据、JSON数据等。请求体的格式取决于Content-Type请求头的值。

//请求体的格式有两种，需要告诉服务器，是通过求情头的Content-Type来告诉我的。
// 第一种格式：application/x-www-form-urlencoded
username=lvmanba&age=20
// 第二种格式：application/json
{
   "username"：lvmanba, "age": 20}
// 第三种格式：multipart/form-data 文件上次

在这里插入图片描述

二、 Http 响应报文

响应状态行：

响应状态码（status），响应对应的文本描述（statusText)
在这里插入图片描述

多个响应头：

//响应回来内容的格式有text/html,text/json
//charset 是响应回来的内容的编码
Content-Type: text/html; charset=utf-8
//当浏览器接收到这个响应后，会按照 Set-Cookie 指令来存储 Cookie。这些 Cookie 之后会在同一域名下的请求中自动附加到请求头中，供服务器读取。
Set-Cookie: BD_CK_SAM=1; path=/

响应体：

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

三、访问地址风格API分类

1、REST API: restful

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

2、非REST API: restless

(1)、请求方式不决定请求的CRUD 操作
(2)、一个请求路径只对应一个操作
(3)、一般只有 GET/POST

四、使用json-server 搭建环境

json-server是一款 json 数据服务器，它运行在 Express 服务器，可以对json文件、js脚本生成的json数据、远程json数据进行restful风格的增删改查操作，通过指定一个json文件作为api数据源，可以进行分页、排序、关联查询、范围查询等各种查询操作，是一套完整的模拟 REST API 接口。

1、安装

npm install -g json-server

2、创建一个json文件

文件名为 data.json

{
   
  "posts": [
    {
    "id": "1", "title": "a title", "views": 100 },
    {
    "id": "2", "title": "another title", "views": 200 }
  ],
  "comments": [
    {
    "id": "1", "text": "a comment about post 1", "postId": "1" },
    {
    "id": "2", "text": "another comment about post 1", "postId": "1" }
  ],
  "profile": {
   
    "name": "typicode"
  }
}

3、运行json-server

在data.json的目录(D:\demo)，运行cmd，然后键入： json-server --watch db.json
在这里插入图片描述
打开 index

提示：两种风格返回的结果一个是数组，另外一个是对象。如下图所示。

也可以改变端口和路由规则：

# 第一种：默认的运行方式
D:\demo> json-server --watch data.json   // 更改默认端口(3000) 不加watch也可以。
D:\demo> json-server data.json

# 第二种：更改端口号
D:\demo> json-server -p 8888 data.json

# 第三种 配置主机地址
D:\demo> json-server -H 0.0.0.0 data.json   

# 第四种 新增配置 添加自定义路由，根目录下新建routes.json文件，内容如下
{
   
  "/api/*": "/$1",
  "/:resource/:id/show": "/:resource/:id",
  "/posts/:category": "/posts?category=:category",
  "/articles?id=:id": "/posts/:id"
}
D:\demo> json-server data.json --routes routes.json

五、XHR封装自己的ajax

要求：我们根据axiso的功能，自己来模仿者构建一个类似的。
1、返回值类型为promise，成功的结果为response,异常的结果为err。
2、能处理多种求情 GET/POST/PUT/DELETE
3、函数的参数为一个一个配置对象

{
   
	url:'',  //请求地址
	method: '', //请求方法GET/POST/PUT/DELETE
	params:{
   }, //GET/DELETE请求的query参数
	data:{
   },  //POST/DELETE 请求的请求体参数
}

4、响应json数据自动解析为js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <br>
        <button class="btn btn-primary" type="button" id="testGet" >GET请求</button>
    </div>
    <script>
        const testGet = document.querySelector("#testGet")
        testGet.addEventListener("click",function(){
     
            axios({
     
                    url: 'http://localhost:3000/posts2',
                    method: 'GET',
                    params: {
     
                        id: 1,
                        xxx: 'abc'
                    }
                }).then(err=>{
     
                response => {
     
                    console.log(response)
                },
                error => {
     
                    alert(error.message)
                }
            })
        });
        //对象解构语法,无论是对象使用还是函数使用返回来的都是promise结构。
        function axios({
     
            url,
            method='GET',
            params = {
     },  //自动附加在地址栏上
            data={
     }
        }){
     
            //返回一个promise对象
            return new Promise((resolve,reject)=>{
     
                method = method.toUpperCase()  //全部转为大写。
                //处理query参数，拼接在url上， 如?id=1&name=''