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