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 请求：

参数

• 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 项有

const _axios = axios.create({     baseURL:"http://localhost:8080",     withCredentials:true });  const response = await _axios.get("/management_system/getStudentsServlet"); console.log(response); 

4.response对象属性

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 中的第一个函数用于处理正常的响应，第二个函数用于处理响应时的错误。你可以根据需要对错误进行处理，例如弹出错误提示或者重新跳转到登录页面。