axios详解-从零开始轻松搞定：探索Axios多对象传值与文件上传下

共104个文件

jar：27个

xml：21个

class：18个

160 浏览量 2023-08-16 20:50:50 上传评论 1 收藏 17.86MB ZIP 举报

Axios 是一个基于 promise 的 HTTP 库，它在前端和后端都能运行，且非常受欢迎。本篇文章将深入探讨如何使用 Axios 进行多对象传值以及文件上传，旨在帮助开发者从零开始轻松掌握这两个重要功能。 ### 一、Axios 多对象传值在进行 API 调用时，我们经常需要传递多个参数。Axios 提供了方便的方式来处理这种情况。主要通过两种方式： 1. **URL Query Parameters**：适用于GET请求，将参数添加到URL的查询字符串中。例如： ```javascript axios.get('/user', { params: { ID: 12345, name: 'John Doe' } }) ``` 2. **Request Payload**：适用于POST、PUT等请求，将参数放入请求体中。例如： ```javascript axios.post('/user', { ID: 12345, name: 'John Doe' }) ``` 这里，`params` 对象被转换为 JSON 格式并自动设置正确的 `Content-Type` 头部。 ### 二、Axios 文件上传文件上传通常涉及到表单数据的提交，特别是当使用 `multipart/form-data` 格式时。Axios 支持通过 FormData 对象来实现文件上传： 1. **创建 FormData 对象**： ```javascript let formData = new FormData(); formData.append('file', fileInput.files[0]); formData.append('name', 'MyFile'); ``` 这里，`fileInput` 是用户选择文件的 input 元素。 2. **使用 Axios 发送文件**： ```javascript axios.post('/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(response => { console.log('File uploaded successfully'); }).catch(error => { console.error('Error uploading file:', error); }); ``` 注意设置 `Content-Type` 为 `multipart/form-data`，因为这是上传文件的标准格式。`headers` 对象用于指定这个头部信息。 ### 三、与 Vue.js 结合使用在 Vue.js 应用中，Axios 可以作为插件安装和使用，方便在组件间共享请求配置： 1. **安装 Axios**： ```bash npm install axios ``` 2. **在 Vue 应用中导入 Axios**： ```javascript import axios from 'axios'; Vue.prototype.$axios = axios; ``` 现在，可以在任何 Vue 组件中通过 `this.$axios` 访问 Axios 实例。 ### 四、进阶技巧 - **拦截器**：Axios 提供了请求和响应的拦截器，可以用来添加全局的处理逻辑，如认证令牌的添加或错误处理。 - **取消请求**：如果需要取消正在运行的请求，Axios 提供了 CancelToken 对象，可以避免不必要的资源浪费。 - **超时设置**：可以设置请求的超时时间，避免因网络问题导致长时间等待。通过理解并熟练运用 Axios 的这些特性，开发者可以更高效地进行 Web 应用的开发，无论是简单的数据传递还是复杂的文件上传，都能够游刃有余。在实际项目中，结合 Vue.js 等前端框架，Axios 更能发挥其强大的威力，提升开发效率。

资源推荐

资源详情

资源评论

收起资源包目录

axios详解-从零开始轻松搞定：探索Axios多对象传值与文件上传下（104个子文件）

AdminController.class 3KB

ControllerDemo2.class 3KB

Admin.class 2KB

ResultObject.class 2KB

ControllerDemo1.class 2KB

AdminServiceImpl.class 2KB

MessageUtil.class 499B

AdminService.class 495B

AdminMapper.class 468B

.gitignore 184B

axiosHomework.html 8KB

demo1.html 3KB

index.html 2KB

demo2.html 2KB

main.html 1KB

vueStart001.iml 509B

mysql-connector-java-8.0.28.jar 2.36MB

aspectjweaver-1.9.7.jar 1.99MB

mybatis-3.5.10.jar 1.67MB

protobuf-java-3.11.4.jar 1.58MB

spring-web-5.3.20.jar 1.56MB

jackson-databind-2.14.2.jar 1.54MB

spring-core-5.3.20.jar 1.41MB

spring-context-5.3.20.jar 1.22MB

spring-webmvc-5.3.20.jar 1004KB

spring-beans-5.3.20.jar 682KB

fastjson-1.2.83.jar 656KB

log4j-1.2.17.jar 478KB

jackson-core-2.14.2.jar 448KB

spring-jdbc-5.3.20.jar 418KB

jstl-1.2.jar 405KB

standard-1.1.2.jar 384KB

spring-aop-5.3.20.jar 374KB

spring-tx-5.3.20.jar 326KB

spring-expression-5.3.20.jar 283KB

commons-io-2.2.jar 170KB

jackson-annotations-2.14.2.jar 75KB

commons-fileupload-1.4.jar 71KB

mybatis-spring-2.0.7.jar 70KB

spring-aspects-5.3.20.jar 46KB

slf4j-api-1.7.21.jar 40KB

spring-jcl-5.3.20.jar 24KB

slf4j-log4j12-1.7.21.jar 10KB

AdminController.java 4KB

ControllerDemo2.java 2KB

Admin.java 2KB

ResultObject.java 2KB

ControllerDemo1.java 1KB

AdminServiceImpl.java 1KB

AdminMapper.java 452B

AdminService.java 442B

MessageUtil.java 266B

vue.js 409KB

jquery.js 94KB

axios.min.js 17KB

inputFiles.lst 791B

createdFiles.lst 377B

MANIFEST.MF 87B

dbconfig.properties 140B

workspace.xml 34KB

pom.xml 7KB

AdminMapper.xml 2KB

applicationContext-datasources.xml 2KB

web.xml 2KB

applicationContext-mvc.xml 949B

jarRepositories.xml 864B

misc.xml 760B

log4.xml 757B

共 104 条

package com.powernode.controller; import com.powernode.bean.Admin; import com.powernode.service.AdminService; import com.powernode.util.MessageUtil; import com.powernode.util.ResultObject; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import java.io.IOException; import java.util.List; @Controller @RequestMapping("/admin") public class AdminController { @Autowired AdminService adminService; //添加 @RequestMapping("/addAdmin.action") @ResponseBody public ResultObject addAdmin(@RequestBody Admin admin, ResultObject resultObject) throws IOException { boolean b = adminService.addAdminService(admin); System.out.println(b); if(b){ resultObject.setResultCode(MessageUtil.SUCCESS_CODE); resultObject.setResultMessage(MessageUtil.SUCCESS_STR); }else{ resultObject.setResultCode(MessageUtil.FAIL_CODE); resultObject.setResultMessage(MessageUtil.FAIL_STR); } return resultObject; } //全查询带模糊查询 @RequestMapping("/findAdmin.action") @ResponseBody public ResultObject findAdmin(String findName, ResultObject resultObject) throws IOException { List<Admin> adminList = this.adminService.findAdminService(findName); System.out.println(adminList); if(adminList!=null){ resultObject.setResultCode(MessageUtil.SUCCESS_CODE); resultObject.setResultMessage(MessageUtil.SUCCESS_STR); resultObject.setResultData("adminList", adminList); }else{ resultObject.setResultCode(MessageUtil.FAIL_CODE); resultObject.setResultMessage(MessageUtil.FAIL_STR); } return resultObject; } //删除 @RequestMapping("/deleteAdmin.action") @ResponseBody public ResultObject deleteAdmin(Integer adminId, ResultObject resultObject) throws IOException { boolean b = adminService.deleteAdminService(adminId); if(b){ resultObject.setResultCode(MessageUtil.SUCCESS_CODE); resultObject.setResultMessage(MessageUtil.SUCCESS_STR); }else{ resultObject.setResultCode(MessageUtil.FAIL_CODE); resultObject.setResultMessage(MessageUtil.FAIL_STR); } return resultObject; } //id查询 @RequestMapping("/findIdAdmin.action") @ResponseBody public ResultObject findIdAdmin(Integer adminId, ResultObject resultObject) throws IOException { Admin admin = adminService.findAdminByIdService(adminId); if(admin!=null){ resultObject.setResultCode(MessageUtil.SUCCESS_CODE); resultObject.setResultMessage(MessageUtil.SUCCESS_STR); resultObject.setResultData("admin", admin); }else{ resultObject.setResultCode(MessageUtil.FAIL_CODE); resultObject.setResultMessage(MessageUtil.FAIL_STR); } return resultObject; } //修改 @RequestMapping("/updateAdmin.action") @ResponseBody public ResultObject updateAdmin(@RequestBody Admin admin, ResultObject resultObject) throws IOException { System.out.println(admin); boolean b = adminService.updateAdmin(admin); if(b){ resultObject.setResultCode(MessageUtil.SUCCESS_CODE); resultObject.setResultMessage(MessageUtil.SUCCESS_STR); }else{ resultObject.setResultCode(MessageUtil.FAIL_CODE); resultObject.setResultMessage(MessageUtil.FAIL_STR); } return resultObject; } }

评论收藏

内容反馈