深入浅出Ajax---网络请求的核心技术

Ajax技术

一.原生Ajax

1.Ajax简介

Ajax全名：async javascript and XML，它能实现前后台交互的能力，也就是我们客户端给服务器发送消息，或者客户端接收服务器的请求并发生响应的工具。

AJAX（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术，它允许网页与服务器进行异步通信，从而更新网页的部分内容而无需重新加载整个页面。AJAX并不是一种新的编程语言，而是一种结合了多种现有技术的开发方法，主要包括：

0. JavaScript：用于在客户端执行代码，处理用户交互和动态更新内容。
1. XMLHttpRequest：这是AJAX的核心组件，允许在后台与服务器进行数据交换。虽然“XML”在名称中，但AJAX实际上可以使用多种数据格式（如JSON、HTML、XML）进行数据传输。
2. DOM（文档对象模型） ：AJAX可以通过DOM来动态改变网页内容，这使得用户体验更加流畅。

1.1.AJAX的工作原理

0. 用户操作触发请求：用户在网页上执行某个操作（如点击按钮），该操作会触发JavaScript代码。
1. 发送请求：JavaScript使用XMLHttpRequest对象向服务器发送请求，可以是GET或POST请求。
2. 处理响应：服务器处理请求并返回数据，通常是JSON或XML格式。JavaScript接收这些数据并对其进行处理。
3. 更新网页：根据服务器返回的数据，JavaScript通过DOM操作更新网页的某些部分，而无需重新加载整个页面。

1.2.Ajax的优点

传统网站问题：

• 为了网络请求获取数据，页面需要重新加载，既浪费资源，又消耗时间，效率极低
• 验证表单过程中，若数据有错，页面直接重新加载，用户体验极差

AJAX优势：

• 提高用户体验：由于无需重新加载页面，用户可以更流畅地与网站互动。
• 减少服务器负担：只请求所需的数据而不是整个页面，降低了带宽使用。
• 实现动态内容更新：可以根据用户的行为动态加载内容，例如无限滚动、表单验证等。

1.3.应用场景

AJAX技术被广泛应用于多种场景，包括：

• 实时搜索建议：在用户输入搜索关键词时，自动提供建议。
• 在线聊天：实现实时消息传递。
• 表单提交：在后台提交表单数据，提供用户反馈而不刷新页面。

随着技术的发展，AJAX的实现已经变得更加简便，许多现代前端框架（如React、Vue.js、Angular等）内置了对AJAX的支持，使得开发者可以更方便地进行异步操作，提升网页的动态性和用户体验。

2.Ajax基础

• 在 js 中有内置的构造函数来创建 ajax 对象
• 创建 ajax 对象以后，我们就使用 ajax 对象的方法去发送请求和接受响应

2.1.创建一个 ajax 对象

 // IE9及以上
 const xhr = new XMLHttpRequest()
 ​
 // IE9以下，无用
 const xhr = new ActiveXObject('Mricosoft.XMLHTTP')

• 上面就是有了一个 ajax 对象

• 我们就可以使用这个 xhr 对象来发送 ajax 请求了

2.2.配置链接信息

 let xhr = new XMLHttpRequest();
 ​
 xhr.open("get", "1.json", true);
 // 对请求xhr进行配置
 ​
 // 第一个参数是请求方式 get post
     // get 请求 和 post 请求的区别
     // get 请求不需要发送数据
     // post 请求需要发送数据
 ​
 // 第二个参数是请求地址
 ​
 // 第三个参数是异步还是同步，true是异步
     // false是同步,会阻塞后面的代码,直到请求完成才会继续后面的代码,由于是同步，所以可以用来做数据加载

• 上面的代码执行完毕以后，本次请求的基本配置信息就写完了

2.3.发送请求

语法示例：

 const xhr = new XMLHttpRequest()
 xhr.open('get', './data.php')
 ​
 // 使用 xhr 对象中的 send 方法来发送请求
 xhr.send()

• 上面代码是把配置好信息的 ajax 对象发送到服务端

下面以Node.js内置配置好的、协助开发者学习的一个服务端json-server为例，介绍各种不同的请求方式

注意

• 实际开发中服务端的接口都是后端程序员自己写的，以下的请求方式只是采用了类似官方的规范，与实际开发的请求接口效果还是有较大差别。
• 使用VSCode的Live Server插件来配合使用json-server时，会出现请求后页面刷新的问题，这涉及到服务端的兼容问题，水土不服

get请求

用途：主要用于从服务器获取数据

特点：若要通过服务器从后端获取指定的数据，将参数附加在URL的后面，语法示例如下：

 xhr.open("GET", "https://api.example.com/data?id=1", true);

示例：

 const xhr = new XMLHttpRequest();
 xhr.open("GET", "https://api.example.com/data", true);
 xhr.onreadystatechange = function () {
   if (xhr.readyState === 4 && xhr.status === 200) {
     console.log(JSON.parse(xhr.responseText));
   }
 };
 xhr.send();

post请求

用途：用于向服务器发送数据

特点：数据在请求体中传递，也就是写在xhr.send()中发送数据，常用于提交表单或上传文件，这里不同的格式需要设置不同的请求头，使得以合适的编码格式传递数据

• 提交表单

   // form编码
   xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   xhr.send(`name=b1ng3&age=18`);
  

• 上传文件(json文件)

   // json编码
   xhr.setRequestHeader("Content-Type", "application/json");
   xhr.send(JSON.stringify({ name: "b1ng3", age: 18 }));
  

put请求

用途：用于更新服务器上的现有资源

特点：全量更新，会直接将通过URL选择在服务器中选择的数据全部修改为发送的数据，这也是与patch请求的差别

如下示例，会将服务器端users列表下索引为2的数据全部擦除后，修改为age:24：

 xhr.open("put", "http://localhost:3000/users/2", true);
 // json编码
 xhr.setRequestHeader("Content-Type", "application/json");
 xhr.send(JSON.stringify({ age: 24 }));

patch请求

用途：用于更新服务器上的现有资源

特点：差量更新，会直接将通过URL选择在服务器中选择的数据只修改发送的数据部分，类似于补丁的业务逻辑

如下示例，会将服务器端users列表下索引为2的数据的age属性修改，修改为age:24：

 xhr.open("PATCH", "http://localhost:3000/users/2", true);
 // json编码
 xhr.setRequestHeader("Content-Type", "application/json");
 xhr.send(JSON.stringify({ age: 24 }));

注意：由于patch这里有点问题，发送请求要用大写形式

delete请求

用途：用于删除服务器上的资源

特点：直接将通过URL选择在服务器中选择的数据全部删除

示例：

 xhr.open("DELETE", "http://localhost:3000/users/2", true);
 xhr.send();

2.4.请求异常处理

• 一个最基本的 ajax 请求就是上面三步

• 但是光有上面的三个步骤，我们确实能把请求发送的到服务端

• 如果服务端正常的话，响应也能回到客户端

• 但是我们拿不到响应

• 如果想拿到响应，我们有两个前提条件

  0. 本次 HTTP 请求是成功的，也就是我们之前说的 http 状态码为 200 ~ 299
  1. ajax 对象也有自己的状态码，用来表示本次 ajax 请求中各个阶段

ajax 状态码

• ajax 状态码 - xhr.readyState

• 是用来表示一个 ajax 请求的全部过程中的某一个状态

  • readyState === 0： 表示未初始化完成，也就是 open 方法还没有执行
  • readyState === 1： 表示配置信息已经完成，也就是执行完 open 之后
  • readyState === 2： 表示 send 方法已经执行完成
  • readyState === 3： 表示正在解析响应内容
  • readyState === 4： 表示响应内容已经解析完毕，可以在客户端使用了

• 这个时候我们就会发现，当一个 ajax 请求的全部过程中，只有当 readyState === 4 的时候，我们才可以正常使用服务端给我们的数据

• 所以，配合 http 状态码为 200 ~ 299

  • 一个 ajax 对象中有一个成员叫做 xhr.status
  • 这个成员就是记录本次请求的 http 状态码的

• 两个条件都满足的时候，才是本次请求正常完成

readyStateChange

• 在 ajax 对象中有一个事件，叫做 readyStateChange 事件

• 这个事件是专门用来监听 ajax 对象的 readyState 值改变的的行为

• 也就是说只要 readyState 的值发生变化了，那么就会触发该事件

• 所以我们就在这个事件中来监听 ajax 的 readyState 是不是到 4 了

   const xhr = new XMLHttpRequest()
   xhr.open('get', './data.php')
   ​
   xhr.send()
   ​
   xhr.onreadyStateChange = function () {
     // 每次 readyState 改变的时候都会触发该事件
     // 我们就在这里判断 readyState 的值是不是到 4
     // 并且 http 的状态码是不是 200 ~ 299
     if (xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {
       // 这里表示验证通过
       // 我们就可以获取服务端给我们响应的内容了
     }
   }
  

responseText

• ajax 对象中的 responseText属性

• 就是用来记录服务端给我们的响应体内容的

• 所以我们就用这个成员来获取响应体内容就可以

   const xhr = new XMLHttpRequest()
   xhr.open('get', './data.php')
   ​
   xhr.send()
   ​
   xhr.onreadyStateChange = function () {
     if (xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {
       // 我们在这里直接打印 xhr.responseText 来查看服务端给我们返回的内容
       console.log(xhr.responseText)
     }
   }
  

onload

在AJAX中，onload事件处理程序是用于处理响应的关键部分。当使用XMLHttpRequest对象发送异步请求时，可以为该对象定义onload事件，以便在请求成功完成并接收到响应时执行特定的代码。

 // 创建XMLHttpRequest对象
 var xhr = new XMLHttpRequest();
 ​
 // 定义onload事件处理程序
 xhr.onload = function() {
     if (xhr.status >= 200 && xhr.status < 300) {
         // 请求成功，处理响应数据
         var data = JSON.parse(xhr.responseText); // 假设响应是JSON格式
         console.log(data);
     } else {
         // 请求失败，处理错误
         console.error('请求失败，状态码：', xhr.status);
     }
 };
 ​
 // 定义onerror事件处理程序
 xhr.onerror = function() {
     console.error('请求过程中发生错误');
 };
 ​
 // 发送GET请求
 xhr.open('GET', 'https://api.example.com/data', true);
 xhr.send();
 ​

除了onload，AJAX还支持其他事件处理程序，帮助处理不同的情况：

• onerror：用于处理网络错误（例如，无法连接到服务器）。
• onreadystatechange：在请求状态变化时触发，可以根据xhr.readyState的值来执行不同的逻辑。虽然使用onload和onerror更加简洁，但onreadystatechange提供了更详细的状态跟踪。

3.json-server介绍

json-server 是一个用于快速构建 RESTful API 的 Node.js 库。它可以让开发者快速创建一个模拟的 REST API，以便进行前端开发和测试。以下是 json-server 的一些主要特点和使用方法：

主要特点

0. 简单易用：只需几行代码即可启动一个模拟的 REST API，无需编写任何服务器代码。
1. 基于 JSON 文件：json-server 使用 JSON 文件作为数据库，任何对数据的操作都将反映在该文件中。
2. 完整的 RESTful API：支持标准的 HTTP 方法（GET、POST、PUT、PATCH、DELETE），可以轻松进行 CRUD 操作。
3. 自定义路由：允许用户定义自定义的 API 路由和查询参数，增强灵活性。
4. 快速原型开发：非常适合前端开发者进行快速原型开发和测试，无需设置后端环境。
5. 支持中间件：可以通过添加中间件扩展功能，比如身份验证、请求日志等。

安装

要安装 json-server，可以使用 npm（Node.js 的包管理器）：

 npm install -g json-server

使用方法

0. 创建 JSON 文件：首先，创建一个 JSON 文件，命名为 db.json，示例内容如下：

    {
      "posts": [
        { "id": 1, "title": "Post 1", "author": "Author 1" },
        { "id": 2, "title": "Post 2", "author": "Author 2" }
      ],
      "comments": [
        { "id": 1, "body": "Comment 1", "postId": 1 },
        { "id": 2, "body": "Comment 2", "postId": 2 }
      ]
    }
   

1. 启动 JSON Server：在命令行中导航到 JSON 文件所在的目录，并运行以下命令：

    json-server --watch db.json
   

   这将启动一个服务器，默认监听在 http://localhost:3000。

2. 访问 API：你可以使用浏览器或 Postman 等工具访问 API。例如：

   • 获取所有 posts：GET http://localhost:3000/posts
   • 获取单个 post：GET http://localhost:3000/posts/1
   • 创建新 post：POST http://localhost:3000/posts（需要在请求体中发送 JSON 数据）
   • 更新 post：PUT http://localhost:3000/posts/1（同样需要发送 JSON 数据）
   • 删除 post：DELETE http://localhost:3000/posts/1

自定义路由和查询参数

可以通过添加 routes.json 文件来自定义路由。例如：

 {
   "/api/posts": "/posts"
 }

这样，访问 http://localhost:3000/api/posts 将返回 /posts 的数据。

中间件

可以使用 json-server 提供的中间件，或自定义中间件来扩展功能。示例代码如下：

 const jsonServer = require('json-server')
 const server = jsonServer.create()
 const router = jsonServer.router('db.json')
 const middlewares = jsonServer.defaults()
 ​
 server.use(middlewares)
 server.use(jsonServer.rewriter({
   // 自定义路由
 }))
 server.use(router)
 server.listen(3000, () => {
   console.log('JSON Server is running')
 })

总结

json-server 是一个非常有用的工具，特别适合前端开发者在没有后端支持的情况下进行开发和测试。通过简单的配置和使用，它能够快速为开发环境提供一个完整的 REST API。

二.Fetch

1.Fetch简介

Fetch 是一个现代的 JavaScript API，用于在网络上进行 HTTP 请求。它提供了一种更加灵活和简洁的方法来与服务器进行数据交互，相比于原生Ajax的 XMLHttpRequest，Fetch 有许多优点，比如使用 Promise 来处理异步操作，使得代码更加清晰和易于维护。

FetchAPI 允许你执行异步请求，获取数据，并处理响应。它通常用于从服务器获取 JSON 数据，提交表单，上传文件等。

Fetch优点

• 基于 Promise： API 返回一个 Promise，该 Promise 解析为对请求的响应。这使得处理异步操作变得更加容易。fetch
• 支持各种 HTTP 方法：除了 POST 之外，还可以通过更改 options 对象中的属性，与 GET、PUT、DELETE 等其他 HTTP 方法一起使用。fetch``method
• Headers：您可以使用 options 对象中的属性轻松设置和修改请求标头。headers
• 处理 CORS：API 会自动处理 CORS（跨域资源共享），并允许您使用属性对其进行配置。fetch``mode
• 错误处理：API 不会拒绝 HTTP 错误状态（如 404 或 500）的 Promise。您需要检查该属性以显式处理错误。fetch``Response.ok
• 更好的可读性：基于 Promise 的方法使代码更简洁、更易于阅读，尤其是在使用 async/await 语法时。

2.Fetch基础

基本语法如下：

fetch(url, options)
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });

0. url：请求的资源地址。

1. options（可选）：一个包含请求配置的对象。包括请求方法、标头和正文的 options 对象。

   {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
     },
     body: JSON.stringify({ name: "b1ngn", age: 100 }),
   }
   

   • method： “POST” ：指定 请求方式为 POST。这通常用于向服务器发送数据。

   • headers：此属性是一个对象，其中包含要包含在请求中的任何自定义标头：

     • “Content-Type”： “application/x-www-form-urlencoded” ：表示请求体为 form格式。
     • “Content-Type”： “application/json” ：表示请求体为 JSON 格式，允许服务器正确解释传入数据。

   • body：这是要随请求发送的数据。

     • name=b1ng3&age=18：对象使用from编码。
     • JSON.stringify({ name: "b1ngn", age: 100 })：对象使用 转换为 JSON 字符串。

2. 处理响应：

   .then((res) => res.json())
   

   • 该函数返回一个 Promise，该 Promise 解析为表示对请求的响应的对象。
   • 第一个方法获取对象 （） 并调用其方法。此方法还返回一个 Promise，该 Promise 将响应正文文本解析为 JSON 的结果。

3. 访问数据：

   .then((data) => console.log(data));
   

   • 第二种方法接收解析的 JSON 数据，并将其记录到控制台。您可以在此处处理来自服务器的响应。

三、axios

1.axios简介

axios是一个基于Promise的Ajax网络请求库，作用于node.js和浏览器中。在服务端它使用原声的node.js http模块，而在客户端(浏览端)则使用XMLHttpRequests

Axios（相比于原生的XMLHttpRequest对象来说） 简单易用,（相比于jQuery）axios包尺寸小且提供了易于扩展的接口，是专注于网络请求的库。

axios有以下特性：

• 从浏览器创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防御XSRF

axios可以请求的方法：

• get：获取数据，请求指定的信息，返回实体对象
• post：向指定资源提交数据（例如表单提交或文件上传）
• put：更新数据，从客户端向服务器传送的数据取代指定的文档的内容
• patch：更新数据，是对put方法的补充，用来对已知资源进行局部更新
• delete：请求服务器删除指定的数据
• head：获取报文首部

请求方法别名

为了方便起见，axios为所有支持的请求方法提供了别名:

• axios(config)
• axios.request(config)
• axios.get(url [,config])
• axios.post(url [,data [,config]])
• axios.put(url [,data [,config]])
• axios.delete(url [,config])
• axios.patch(url [,data [,config]])
• axios.head(url [,config])

2.axios发送请求

axios是当下最热门的网络请求库，要使用它需要引入外部依赖

• 在Vue、React的项目下，常使用包管理工具npm来引入

   npm install axios
  

• 在原生JS中使用，也可以使用CDN引入

   <script src="https://cdn.staticfile.net/axios/1.6.5/axios.js"></script>
  

Axios常用的几种请求方法：get，post，put，patch，delete

• get：一般用于获取数据
• post：一般用于提交数据（表单提交与文件上传）
• patch：更新数据（只将修改的数据推送到后端（服务端））
• put：更新数据（所有数据推送到服务端）
• delete：删除数据

get方法

请求别名的使用(一种简化请求方法配置的API)

方式一.axios.get(url[, config]) 用于获取数据

• 不带有参数(在服务端寻找数据的参数)：

   axios .get("/data.json")
         .then((response) => {
           // result不是直接的返回结果
           console.log("数据：",response);
           // result.data才是真正的返回结果
           console.log("真正的数据：",response.data);
         })
         .catch((err) => {
           console.log(err);
         });
  

• 带有参数：

   axios  .get("/data.json?id=5")
           .then((result) => {
             // 处理成功情况
             console.log(result);
           })
           .catch((err) => {
             // 处理错误情况
             console.log(err);
           });
  

方式二.通过向axios传递相关配置来创建请求

• 不带参数：

   axios({
         method: "get",
         url: "/data.json"
       }).then((res) => {
         // result不是直接的返回结果
         console.log("数据：", result);
         // result.data才是真正的返回结果
         console.log("真正的数据：", result.data);
       });
  

• 带参数：

    axios({
         method: "get",
         url: "/data.json",
         //带参数时  ————若无参数时直接省略params对象不写
         params: {
           id: 5,
         },
       }).then((result) => {
         // result不是直接的返回结果
         console.log("数据：", result);
         // result.data才是真正的返回结果
         console.log("真正的数据：", result.data);
       });
  

post方法

方式一.通过axios.post(url [,data [,config]])发送数据

 axios.post("http://localhost:3000/users",{
     name:"b1ng",
     age:100
 }).then(response=>{
     console.log(response.data)
 })

方式二.通过axios传递相关配置来创建请求

 axios({
     url:"http://localhost:3000/users",
     method:"post",
     data:{
         name:"b1ng",
         age:"100"
     }
 }).then(response=>{
     console.log(response.data)
 })

温馨提示

在以配置对象的方法发送请求时，post与get两种方法有易于混淆的点，get接收参数时配置的是param参数，用于匹配后端数据，而post发送数据是配置data参数

axios创建实例对象

可以在项目中创建一个 Axios 实例对象，并配置一些基本参数，如基本 URL、超时时间等。然后，可以使用该实例对象发送请求。

 import axios from 'axios';
 ​
 // 创建 Axios 实例对象
 const instance = axios.create({
   baseURL: 'https://api.example.com', // 设置基本 URL
   timeout: 5000, // 设置请求超时时间
 });
 ​
 // 发送 GET 请求
 instance.get('/users')
   .then(response => {
     console.log(response.data);
   })
   .catch(error => {
     console.error(error);
   });
 ​
 // 发送 POST 请求
 instance.post('/users', {
   name: 'John',
   age: 30,
 })
   .then(response => {
     console.log(response.data);
   })
   .catch(error => {
     console.error(error);
   });
 ​

3.axios的默认配置

3.1.全局 axios 默认值

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

3.2.自定义实例默认值

// 创建实例时配置默认值
const instance = axios.create({
  baseURL: 'https://api.example.com'
});

// 创建实例后修改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

3.3.配置的优先级

配置将会按优先级进行合并。它的顺序是：

0. 在lib/defaults.js中找到的库默认值
1. 然后是实例的 defaults 属性
2. 最后是请求的 config 参数。

后面的优先级要高于前面的。下面是一个示例：

 // 使用库提供的默认配置创建实例
 // 此时超时配置的默认值是 `0`
 const instance = axios.create();
 ​
 // 重写库的超时默认值
 // 现在，所有使用此实例的请求都将等待2.5秒，然后才会超时
 instance.defaults.timeout = 2500;
 ​
 // 重写此请求的超时时间，因为该请求需要很长时间
 instance.get('/longRequest', {
   timeout: 5000
 });

4.axios拦截器

Axios的拦截器是一种可以在请求发送之前或之后对请求或响应进行处理的机制。这种机制可以用于处理一些公共逻辑，如添加认证信息、处理错误等。

Axios的拦截器分为请求拦截器和响应拦截器。请求拦截器在发送请求之前进行处理，响应拦截器在收到响应之后进行处理。

下面是一个简单的示例：

 import axios from 'axios';
 ​
 // 创建 Axios 实例对象
 const instance = axios.create({
   baseURL: 'https://api.example.com', // 设置基本 URL
   timeout: 5000, // 设置请求超时时间
 });
 ​
 // 添加请求拦截器
 instance.interceptors.request.use(config => {
   // 在发送请求之前做些什么，例如添加认证信息
   config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
   return config;
 }, error => {
   // 对请求错误做些什么
   return Promise.reject(error);
 });
 ​
 // 添加响应拦截器
 instance.interceptors.response.use(response => {
   // 对响应数据做点什么
   return response;
 }, error => {
   // 对响应错误做点什么
   if (error.response.status === 401) {
     // 例如，如果响应状态码为 401，跳转到登录页面
     window.location.href = '/login';
   }
   return Promise.reject(error);
 });
 ​
 // 发送请求
 instance.get('/users')
   .then(response => {
     console.log(response.data);
   })
   .catch(error => {
     console.error(error);
   });

在这个示例中，我们首先导入了 Axios，然后创建了一个 Axios 实例对象，并设置了基本 URL 和请求超时时间。接着，我们添加了请求拦截器，用于在发送请求之前添加认证信息。我们还添加了响应拦截器，用于处理响应错误，例如跳转到登录页面。

注意，Axios的拦截器可以链式调用，因此可以进行多个拦截器的处理。具体可以参考 Axios 的官方文档。

如果需要移除拦截器，可以这样：

 const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
 axios.interceptors.request.eject(myInterceptor);

可以给自定义的 axios 实例添加拦截器。

 const instance = axios.create();
 instance.interceptors.request.use(function () {/*...*/});

关于拦截器的use()

use(config => {}) 是 Axios 中用于注册拦截器的方法，常用于定义拦截器的逻辑。它会在请求或响应到达指定阶段时执行回调函数。

use 方法的基本形式如下：

 axios.interceptors.response.use(onFulfilled, onRejected);

参数解析

0. onFulfilled（成功的回调函数）

• 触发时机：

  • 对于请求拦截器：在请求发送前触发。
  • 对于响应拦截器：在响应数据成功返回后触发。

• 接收参数：

  • 请求拦截器：config 对象（包含请求的所有信息，例如 URL、headers）。
  • 响应拦截器：response 对象（包含响应数据、状态码等）。

• 返回值：

  • 请求拦截器：必须返回 config 或修改后的 config，否则请求会被中断。

  • 响应拦截器：返回 response 或需要的处理数据。

2. onRejected（失败的回调函数）

• 触发时机：

  • 对于请求拦截器：请求配置错误或拦截器代码出错时触发。
  • 对于响应拦截器：服务器返回错误状态码、网络错误等情况下触发。

• 接收参数：error 对象，包含错误信息。

• 返回值：返回 Promise.reject(error) 将错误传递给调用者。

5.axios取消请求

看文档吧先。。。。

6.axios二次封装

基本封装部分：

• 基本全局配置：如baseURL,超时时间等

• Token、密钥等：出于权限和安全考虑的密钥设置到请求头

• 响应的统一基本处理：主要针对于错误的情况做全局统一处理

• 封装请求方法：把对接口的请求封装为一个个方法

• 请求拦截器

  作用：

  • 为每个请求添加公共参数或请求头(如：Authorization)
  • 格式化或验证请求数据
  • 打印或记录请求日志

  响应拦截器

  作用：

  • 统一提取响应中的数据部分，简化代码
  • 统一处理从后端接收到的错误状态码，弹出统一的错误提示或重定向到登录页面
  • 格式化响应数据，满足业务需要

7. 请求（Request）结构

在使用 Axios 进行 HTTP 请求时，request、response 和 error 的结构各自包含不同的信息。了解它们的结构有助于更好地进行请求配置和错误处理。

在 Axios 中，请求对象包含了我们在发送 HTTP 请求时需要的所有配置信息。通常我们通过传递一个配置对象来发起请求。请求配置对象可以包括以下字段：

请求对象结构：

 {
   url: string,             // 请求的 URL
   method: string,          // 请求方法，默认为 'get'，常见有 'get', 'post', 'put', 'delete' 等
   headers: object,         // 请求头，包含认证信息、内容类型等
   params: object,          // GET 请求的 URL 参数
   data: object,            // 请求体（对于 POST、PUT 请求等）
   timeout: number,         // 请求超时时间，单位是毫秒
   auth: { username, password }, // 基本认证（Basic Authentication）
   responseType: string,    // 设置响应的数据格式（如 'json', 'text' 等）
   withCredentials: boolean, // 是否跨域请求时携带凭证（如 cookies）
   onUploadProgress: function, // 上传进度的回调函数
   onDownloadProgress: function, // 下载进度的回调函数
   transformRequest: function, // 对请求数据进行转换
   transformResponse: function, // 对响应数据进行转换
 }

示例：

 axios({
   method: 'get',
   url: 'https://api.example.com/data',
   headers: {
     'Authorization': 'Bearer <token>',
     'Content-Type': 'application/json',
   },
   params: { userId: 123 }
 })
 .then(response => {
   console.log(response.data);  // 成功时处理响应数据
 })
 .catch(error => {
   console.error('Error:', error);  // 错误处理
 });

8. 响应（Response）结构

当请求成功时，Axios 会返回一个 响应对象（response） ，它包含了服务器返回的所有重要信息，通常包括响应体、状态码、响应头等。

响应对象结构：

 {
   data: any,                // 响应体，通常是从服务器返回的数据（如 JSON、HTML 等）
   status: number,           // HTTP 状态码，例如 200（成功）、404（未找到）、500（服务器错误）
   statusText: string,       // 响应的状态消息，例如 "OK"、"Not Found" 等
   headers: object,          // 响应头，包含如内容类型、授权信息等
   config: object,           // 请求时传递的配置对象
   request: object           // 发起请求的 XMLHttpRequest 或 HTTP 请求对象
 }

示例：

 axios.get('https://api.example.com/data')
   .then(response => {
     console.log('Status Code:', response.status);  // 200
     console.log('Response Body:', response.data);   // 服务器返回的数据
     console.log('Response Headers:', response.headers); // 服务器返回的头信息
   })
   .catch(error => {
     console.error('Error:', error);
   });

response 示例：

 {
   "data": {
     "userId": 123,
     "name": "John Doe"
   },
   "status": 200,
   "statusText": "OK",
   "headers": {
     "content-type": "application/json; charset=utf-8",
     "x-rate-limit": "60"
   },
   "config": { /* 配置对象 */ },
   "request": { /* 请求对象 */ }
 }

9. 错误（Error）结构

当请求失败时，Axios 会通过 catch() 或 .catch() 返回一个错误对象。这个错误对象包含了关于失败请求的详细信息。常见的错误包括网络错误、请求超时、响应状态码异常等。

错误对象结构：

 {
   message: string,           // 错误消息，通常是一个简短的描述，例如 'Network Error' 或 'timeout of 1000ms exceeded'
   name: string,              // 错误名称，例如 'Error' 或 'AxiosError'
   config: object,            // 请求时的配置对象
   code: string,              // 错误代码（如有），例如 'ECONNABORTED'（请求超时）
   status:number,
   request: object,           // 发起请求的 XMLHttpRequest 或 HTTP 请求对象（如果有）
   response: object,          // 服务器响应的对象（如果有），包含响应的 status、data、headers 等
 }

示例：

 axios.get('https://api.example.com/data')
   .then(response => {
     console.log(response.data);  // 请求成功时的响应数据
   })
   .catch(error => {
     if (error.response) {
       // 请求发出并收到响应，响应的状态码不是 2xx
       console.error('Response Error:', error.response);
     } else if (error.request) {
       // 请求已发出，但没有收到响应
       console.error('Request Error:', error.request);
     } else {
       // 发生在设置请求时的错误
       console.error('Error Message:', error.message);
     }
   });

错误对象的不同情况：

0. 请求发出并收到响应（但状态码不是 2xx） ：

    {
      "response": {
        "data": { /* 错误信息 */ },
        "status": 404,
        "statusText": "Not Found",
        "headers": { /* 服务器响应头 */ },
        "config": { /* 请求配置 */ },
        "request": { /* 请求对象 */ }
      }
    }
   

1. 请求发出但没有收到响应（网络错误等）：

    {
      "request": { /* 请求对象 */ }
    }
   

2. 请求配置错误（例如 URL 错误或请求格式错误）：

    {
      "message": "Request failed with status code 404",
      "name": "AxiosError",
      "config": { /* 请求配置 */ }
    }
   

总结

• Request: 由 url、method、headers、params、data 等组成，指定请求的配置。
• Response: 包含 data（服务器返回的响应体）、status（HTTP 状态码）、headers（响应头）、config（请求时的配置）等，成功时返回这些信息。
• Error: 当请求失败时，错误对象包含 message、response（如果有）以及其他错误相关的详细信息，便于诊断请求失败的原因。

通过这些结构，我们可以灵活地配置请求，获取响应数据，甚至在请求失败时进行详细的错误处理。

6.常回忆看看

6.1.回调函数

在 JavaScript 中，回调函数是一种作为参数传递给另一个函数的函数，该函数在适当的时候被调用。回调函数通常用于处理异步操作的结果。

在上述代码中，.then 方法接受一个回调函数作为参数。当 HTTP 请求成功时，axios 函数返回的 Promise 对象会被解析，并执行 .then 方法中的回调函数。这个回调函数的参数就是 response 对象，它包含了服务器响应的所有信息。

以下是一个示例：

 axios({
     method: "get",
     url: "http://localhost:3000/posts",
     params: {
         id: 2,
     },
 }).then((response) => {
     console.log(response); // 这里的 response 就是服务器响应的数据
 });

在这个示例中，.then 方法接受一个回调函数作为参数。当 HTTP 请求成功时，这个回调函数会被执行，并打印服务器响应的数据。

回调函数是处理异步操作结果的一种常见方式，它们允许你在操作完成时执行一些代码，而不必等待操作完成。

6.2.剖析response

response 是 axios 请求成功后返回的对象。这个对象包含了服务器响应的所有信息。

具体来说，response 对象通常包含以下属性：

• data：服务器返回的数据。这通常是服务器响应的主体内容，可能是 JSON 格式的数据。
• status：HTTP 状态码，例如 200 表示请求成功，404 表示未找到资源等。
• statusText：HTTP 状态文本，例如 "OK" 或 "Not Found"。
• headers：服务器响应的 HTTP 头信息。
• config：请求的配置信息，包括请求方法、URL、请求头等。
• request：生成 HTTP 请求的 XMLHttpRequest 实例。

在 .then 方法中，你可以通过 response.data 访问服务器返回的数据。例如：

axios({
    method: "get",
    url: "http://localhost:3000/posts",
    params: {
        id: 2,
    },
}).then((response) => {
    console.log(response.data); // 服务器返回的数据
    console.log(response.status); // HTTP 状态码
    console.log(response.statusText); // HTTP 状态文本
    console.log(response.headers); // HTTP 头信息
    console.log(response.config); // 请求配置信息
});

这样，你就可以在控制台中看到服务器返回的数据和响应的详细信息。

6.3.response与Promise对象的联系

在 JavaScript 中，axios 函数返回的是一个 Promise 对象。当 HTTP 请求成功时，这个 Promise 对象会被解析，并传递响应数据给 .then 方法中的回调函数。这个回调函数的参数就是 response 对象。

具体来说，axios 函数返回的 Promise 对象在 HTTP 请求成功时会被解析，并执行 .then 方法中的回调函数。这个回调函数的参数就是 response 对象，它包含了服务器响应的所有信息，如数据、状态码、状态文本、头信息等。

以下是一个示例：

axios({
    method: "get",
    url: "http://localhost:3000/posts",
    params: {
        id: 2,
    },
}).then((response) => {
    console.log(response); // 这里的 response 就是服务器响应的数据
});

在这个示例中，axios 函数返回的 Promise 对象在 HTTP 请求成功时会被解析，并执行 .then 方法中的回调函数。这个回调函数的参数 response 就是服务器响应的数据，包含了服务器返回的所有信息。

因此，response 对象与 Promise 对象的关联在于，当 HTTP 请求成功时，Promise 对象会被解析，并传递响应数据给 .then 方法中的回调函数，这个回调函数的参数就是 response 对象。