简单的网站开发,烟台酒店网站建设,contact form 7 wordpress,网上定制西装0.xhr、 ajax、axios、promise和async/await 和http基本方法
xhr、 ajax、axios、promise和async/await都是异步编程和网络请求相关的概念和技术#xff01; xhr#xff1a;XMLHttpRequest是浏览器提供的js对象#xff08;API#xff09;#xff0c;用于请求服务器资源。…0.xhr、 ajax、axios、promise和async/await 和http基本方法
xhr、 ajax、axios、promise和async/await都是异步编程和网络请求相关的概念和技术 xhrXMLHttpRequest是浏览器提供的js对象API用于请求服务器资源。 在没有xhr的年代向服务器请求资源时会返回整个完整的HTML页面浏览器引擎在渲染新的HTML页面时会导致屏幕闪烁。如果你用java awt之流手搓过游戏肯定能深刻明白游戏绘制的闪烁问题使用「双缓冲存技术」方案解决而浏览器上提出方案就是只渲染新的必要的数据而不是整个页面。惟一需要获得整个新 HTML 页面的时候就是希望用户看到新页面的时候。XHR就是这样的技术 ajaxAsynchronous JavaScript and XML ajax是基于 原生xhr或fetch在网页中进行异步通信的技术概念。不刷新整个页面的情况下就可以更新页面内容。 ajax 是一种通用的异步通信概念而不是具体的API or lib。以前是用xhr实现现代也可以用fetch这个浏览器提供API来实现了。例如jquery包含的ajax部分就是封装了原生xhr实现的 Promise既是一种解决异步的技术概念也是在es6提出的处理异步操作的方案JS原生对象技术实现通过链式调用来解决ajax的回调地狱。 axios一个基于 Promise 的 HTTP 客户端lib用于在浏览器和 Node.js 环境中发起 HTTP 请求。能更简单地执行 HTTP 请求 async/awaitasync/await 是基于 Promise 的语法糖
总结来说axios 和 ajax 都是用于进行网络请求的技术但 axios 是一个独立的库而 ajax 是一种通用的异步通信概念。 Promise 是一种用于处理异步操作的基础机制它可以被用于任何需要处理异步的场景包括网络请求。在es6时引入为JS的原生对象进行概念的落地实现 下面是HTTP 常用方法介绍
GET发送请求要求服务器返回某个资源。即请求资源PUT: 与GET相反PUT会向服务器写入更新or创建信息文档POST向服务器发送数据。常见的例如发送表单信息DELETE请求服务器删除指定URL的资源
最容易混淆的是put和post
post用于向服务器发数据put用户向服务器的资源如文件中存储数据
在RESTful接口中以资源为中心将操作转换为对资源的 CRUDCreate、Read、Update、Delete操作使用 HTTP 方法来表示操作类型。 例如使用 GET 获取资源POST 创建资源PUT 更新资源DELETE 删除资源。 写Restful接口分不清post和put话有个小技巧 前端请求结果会生成额外的唯一标识符如数据库表的主键用post 前端请求需要提前知道唯一标识符PUT(当然put不是只能更新也可以创建不规范而已语义混淆,而且put是幂等的按照HTTP 规范)
1.前端发送请求
vue项目中现在一般都是单独创建axios实例然后默认导出 import axios from ‘axios’ const instanceaxios.create({……}) export default instance 具体的接口可以这样导出
import request from /utils/request
export function getSolution(params) {return request({url: /api/XXX/data,method: get,params})具体调用时用 Promise 的链式操作处理
import * as xxapi from /api/datax-job-projectxxapi .getListByUser({ username: username }).then(response {this.jobProjectList response.content.data})1.2 发送请求
http请求发送写法倒是没有很多,主要是参数是否在url上 get、put、post、delete
export function created(data) {return request({url: /api/order,method: post,data})
}export function list(params) {return request({url: /api/order,method: get,params})
}export function updated(data) {return request({url: /api/order,method: put,data})
}export function deleted(data) {return request({url: /api/order,method: delete,params: data})
}export function delete(id) {return request({url: /api/user/remove?id id,method: post})
}get方法: 参数通常放在 URL 的查询字符串中而不是请求体中。例如GET /users?id123,get方法直接传params就行了,参组会字段拼在url后面post/put 方法: 参数则会放在请求报文的请求体中,例如JSON 数据放在请求体中使用 application/json 编码类型。DELETE 方法参数通常不会放在请求体中而是通过 URL 参数或查询字符串来传递。例如DELETE /users/123
后端接受参数
前后端以json格式进行数据交互,后端springboot项目 前端的post和put方法参数在请求报文的请求体中,所以使用RequestBody: 后端: PostMapping(/data)public ResponseEntityString processData(RequestBody MapString, Object requestData) {// Process data received from the frontendreturn ResponseEntity.ok(Data processed successfully);}前端方法,传输的是kv结构,后端也用Map结构. sendData() {const requestData { key: value }; // Data to be sent to the backendaxios.post(/api/data, requestData).then(response {console.log(response.data);}).catch(error {console.error(error);});},当然,如果你Post方法提交的是表单数据,以 application/x-www-form-urlencoded 或 multipart/form-data 编码类型发送, 得用RequestParam get方法一般使用RequestParam接受参数,也可以用PathVariable RequestParam 如果前端key值和形参名称一致,可以不用写RequestParam(“page”)
GetMapping(/api/users)
public ResponseEntityString getUsers(RequestParam(page) int page) {// 处理分页参数// ...return ResponseEntity.ok(Requested page: page);
}// 直接使用方法参数名作为参数名。
// Spring Boot 默认会根据参数名自动进行参数映射
GetMapping(/api/users)
public ResponseEntityString getUsers(int page) {// 处理分页参数// ...return ResponseEntity.ok(Requested page: page);
}当然RequestParam 可以注解来映射不一样的参数名称 前端发送的请求
axios.post(/api/endpoint, {first_name: John,last_name: Doe,user_age: 30
})后端映射 PostMapping(/endpoint)public ResponseEntityString handlePostRequest(RequestParam(first_name) String firstName,RequestParam(last_name) String lastName,RequestParam(user_age) int age) {// 使用参数 firstName、lastName 和 age 来处理请求数据// ...return ResponseEntity.ok(Request handled successfully);}get使用PathVariable 注意GetMapping 需要些占位符,占位符就是形参名称
GetMapping(/api/users/{userId})
public ResponseEntityString getUserById(PathVariable Long userId) {// 根据 userId 查询用户信息// ...return ResponseEntity.ok(Requested user ID: userId);
}DELETE 请求和get请求类似,后端 Spring Boot 项目的 Controller 层可以通过 RequestParam 或 PathVariable 来接收参数,一般都是后者 前端请求:
axios.delete(/api/users/123).then(response {console.log(response.data); // 输出 User with ID 123 deleted successfully.}).catch(error {console.error(error);});DeleteMapping(/api/users/{userId})public String deleteUser(PathVariable Long userId) {// 根据 userId 删除用户return User with ID userId deleted successfully.;}总结 前后端使用json交互情况下, 前端 get put post ,参考示例
api.delete({k:v}).then(response {//})后端接受的话,get一般用RequestParam,put/post用 RequestBody 前端 delete方法,注意后端发送拼个唯一标识符 export function deleteUser(id) { return request({ url: ‘/api/user/’id, method: ‘delete’ }) } 后端接收一般delete用 PathVariable,展望符就是传入形参的名称 DeleteMapping(/api/users/{userId})public String deleteUser(PathVariable Long userId) {// 根据 userId 删除用户return User with ID userId deleted successfully.;}
