西宁做网站_君博相约,长沙it公司排名,济南企业如何建网站,做一个公司网站Vue2-axios基础
1.axios基本概念
在现代的前端开发中#xff0c;处理网络请求是至关重要的一部分。Axios 是一个流行的基于 Promise 的 HTTP 客户端#xff0c;它可以在浏览器和 Node.js 环境中使用。它的设计简单易用#xff0c;支持并行请求、拦截器、CSRF 防护等特性处理网络请求是至关重要的一部分。Axios 是一个流行的基于 Promise 的 HTTP 客户端它可以在浏览器和 Node.js 环境中使用。它的设计简单易用支持并行请求、拦截器、CSRF 防护等特性使得它成为开发人员首选的 HTTP 请求库之一。
Axios 提供了许多优点使得它比传统的 XMLHttpRequest 或者其他 HTTP 客户端更具吸引力
1.简单易用的APIAxios 的 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 后的请求参数类型为简单对象或 URLSearchParamsdata请求体类型有简单对象、FormData、URLSearchParams、File 等withCredentials跨域时是否携带 Cookie 等凭证默认为 false在浏览器端请求服务器端时默认在跨域情况下不会携带cookie这使得服务器每次不会得到正确的cookie信息这时需要设置发送的请求应携带cookie因此可以添加withCredentialstrue在服务器端默认不会接受跨域来的cookie因此在CrossOrigin注解中allowCredentualstrue用于接受cookieresponseType响应类型默认为 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) {// 在发送请求之前做些什么// 可以在此处添加认证信息例如 tokenconfig.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 Unauthorizedreturn Promise.reject(error);
});在上面的例子中axios.interceptors.response.use 中的第一个函数用于处理正常的响应第二个函数用于处理响应时的错误。你可以根据需要对错误进行处理例如弹出错误提示或者重新跳转到登录页面。
