WEB前端12-axios基础

Vue2-axios基础

1.axios基本概念

在现代的前端开发中，处理网络请求是至关重要的一部分。Axios 是一个流行的基于 Promise 的 HTTP 客户端，它可以在浏览器和 Node.js 环境中使用。它的设计简单易用，支持并行请求、拦截器、CSRF 防护等特性，使得它成为开发人员首选的 HTTP 请求库之一。

Axios 提供了许多优点，使得它比传统的 XMLHttpRequest 或者其他 HTTP 客户端更具吸引力：

1.简单易用的API：Axios 的 API 设计非常直观，支持 Promise API，使得异步请求变得更加简单和清晰。
2.浏览器和 Node.js支持：Axios 可以在浏览器和 Node.js 环境中无缝使用，这使得它可以用于各种类型的项目。
3.拦截器支持：可以在请求或响应被 then 或 catch 处理之前拦截它们。这对于在请求发送前或收到响应后执行额外的逻辑（比如添加认证信息、日志记录等）非常有用。
4.自动转换 JSON 数据：Axios 默认会自动将 JSON 数据转换为 JavaScript 对象，这简化了在请求和响应之间转换数据的过程。
5.错误处理：对于HTTP 请求错误，Axios 提供了清晰的错误信息和状态码，帮助开发者更容易地处理异常情况。

2.axios发送请求

安装：使用 npm 安装 Axios：

npm install axios -S

导入 Axios：安装完成后，在你的 JavaScript 文件中导入 Axios：

import axios from 'axios';

方法：Axios 提供了多种方法用于发起 HTTP 请求：

方法	描述
axios.get(url[, config])	发起 GET 请求
axios.delete(url[, config])	发起 DELETE 请求
axios.head(url[, config])	发起 HEAD 请求
axios.options(url[, config])	发起 OPTIONS 请求
axios.post(url[, data[, config]])	发起 POST 请求
axios.put(url[, data[, config]])	发起 PUT 请求
axios.patch(url[, data[, config]])	发起 PATCH 请求

参数

• url: 请求的 URL 地址。
• config: 可选的配置对象，可以包含查询参数 (params)、请求头 (headers)、认证信息 (auth) 等。
• data: 可选的请求体数据，通常用于 POST、PUT 和 PATCH 请求。

1. 发送 GET 请求

async sendReq() {
  try {
    const response = await axios.get('/management_system/getStudentsServlet');
    console.log(response);
  } catch (error) {
    console.error('获取数据出错：', error);
  }
}

这段代码展示了如何使用 Axios 发送一个简单的 GET 请求，从指定的 URL 获取数据。

2. 发送带请求头的 POST 请求

async sendReq() {
  try {
    const response = await axios.post('/management_system/getStudentsServlet', null, {
      headers: { Authorization: 'Bearer your_token_here' }
    });
    console.log(response);
  } catch (error) {
    console.error('请求出错：', error);
  }
}

这里我们演示了如何在 POST 请求中添加自定义的请求头信息。

//servlet接受方式
System.out.println(request.getHeader("Authorization"));

3. 发送带参数的 GET ，POST请求

//GET方式
async sendReq() {
  try {
    const username = '白鹿';
    const password = '女神';
    const response = await axios.get(`/management_system/getStudentsServlet?username=${username}&password=${password}`);
    console.log(response);
  } catch (error) {
    console.error('请求出错：', error);
  }
}

//POST方式
const response = await axios.post(
	`/management_system/getStudentsServlet`,
	null,
	{params:{username : name, message : msg}}
);
console.log(response);

这段代码展示了如何在 GET 请求中携带参数，参数会自动编码并添加到 URL 中。

//servlet接受方式
System.out.println("名字是：" + request.getParameter("name"));
System.out.println("信息是：" + request.getParameter("message"));

4. 发送 JSON 数据的 POST 请求

async sendReq() {
  try {
    const data = {
      name: '白鹿',
      message: '女神'
    };
    const response = await axios.post('/management_system/getStudentsServlet', data);
    console.log(response);
  } catch (error) {
    console.error('请求出错：', error);
  }
}

这段代码展示了如何通过 POST 请求发送 JSON 格式的数据。

//servlet接受方式
StringBuilder sb = new StringBuilder();
BufferedReader reader = request.getReader();
String line;
while ((line = reader.readLine()) != null) {
    sb.append(line);
}
String json = sb.toString();
// 现在 `json` 变量中包含了请求体的 JSON 数据
System.out.println("Received JSON data: " + json);

5. 发送 application/x-www-form-urlencoded 格式的 POST 请求

application/x-www-form-urlencoded 是 HTTP 请求的默认编码类型，通常用于通过 URL 参数传递较简单的表单数据。数据会以键值对的形式发送，每个键值对之间用 & 符号分隔，键名和键值都会进行 URL 编码。

async sendReq() {
  try {
    const params = new URLSearchParams();
    params.append('name', '白鹿');
    params.append('message', '女神');
    const response = await axios.post('/management_system/getStudentsServlet', params);
    console.log(response);
  } catch (error) {
    console.error('请求出错：', error);
  }
}

这段代码展示了如何以 URL 查询参数形式发送 POST 请求。

//servlet接受方式
System.out.println("名字是：" + request.getParameter("name"));
System.out.println("信息是：" + request.getParameter("message"));

6. 发送 multipart/form-data 格式的 POST 请求

multipart/form-data 格式通常用于上传文件或者发送复杂的数据结构，它允许将一个表单分成多个部分，每个部分有自己的内容类型和编码方式。每个部分之间用 boundary 进行分隔，这个 boundary 是一个唯一的字符串，用于区分各个部分。

async sendReq() {
  try {
    const formData = new FormData();
    formData.append('name', '白鹿');
    formData.append('message', '女神');
    const response = await axios.post('/management_system/getStudentsServlet', formData);
    console.log(response);
  } catch (error) {
    console.error('请求出错：', error);
  }
}

• application/x-www-form-urlencoded：适合发送简单的键值对表单数据，如用户名和密码等。它的优点是简单易用，但不支持文件上传，且对于复杂的数据结构支持有限。
• multipart/form-data ：适合上传文件或者发送包含文件在内的复杂数据结构。它的优点是能够处理大文件和复杂的数据格式，但相对于 application/x-www-form-urlencoded，它需要更多的请求体积和处理时间。

3.axios默认配置

在使用axios时，一般使用的默认的axios，这使得一些常用的配置需要在每次发送请求的时候多次重复配置，所以我们可以修改axios的默认配置，减少重复的代码

const axios = create(config);

常见的 config 项有

名称	含义
baseURL	将自动加在 url 前面(常常用做修改统一路径，减少取消自动代理带来的工作量)
headers	请求头，类型为简单对象
params	跟在 URL 后的请求参数，类型为简单对象或 URLSearchParams
data	请求体，类型有简单对象、FormData、URLSearchParams、File 等
withCredentials	跨域时是否携带 Cookie 等凭证，默认为 false（在浏览器端请求服务器端时，默认在跨域情况下不会携带cookie，这使得服务器每次不会得到正确的cookie信息，这时需要设置发送的请求应携带cookie，因此可以添加withCredentials=true；在服务器端默认不会接受跨域来的cookie，因此在@CrossOrigin注解中allowCredentuals=true，用于接受cookie）
responseType	响应类型，默认为 json

const _axios = axios.create({
    baseURL:"http://localhost:8080",
    withCredentials:true
});

const response = await _axios.get("/management_system/getStudentsServlet");
console.log(response);

4.response对象属性

名称	含义	具体
data	响应体数据 ⭐️
status	状态码 ⭐️	200 表示响应成功 400 请求数据不正确 401 身份验证没通过 403 没有权限 404 资源不存在 405 不支持请求方式 post 500 服务器内部错误
headers	响应头

5.axios拦截器

Axios拦截器是在发送请求或接收响应前允许我们进行额外处理的机制。它可以用来全局地添加、修改或者捕获请求和响应。在实际应用中，拦截器可以用来处理诸如添加认证信息、统一处理错误、请求/响应日志记录等场景。

添加请求拦截器

请求拦截器允许我们在发送请求前对其进行修改或者添加额外信息，例如请求头部的设置。

import axios from 'axios';

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    // 可以在此处添加认证信息，例如 token
    config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

添加响应拦截器

响应拦截器允许我们在接收到响应后进行处理，例如统一处理错误、日志记录等操作。

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 对响应错误做点什么
    // 可以在此处处理 HTTP 错误状态码，例如 401 Unauthorized
    return Promise.reject(error);
});

在上面的例子中，axios.interceptors.response.use 中的第一个函数用于处理正常的响应，第二个函数用于处理响应时的错误。你可以根据需要对错误进行处理，例如弹出错误提示或者重新跳转到登录页面。