实现异步请求有哪些方式

axios支持各种请求类型，如GET、POST、PUT等，并支持并发请求、请求取消、请求拦截、响应拦截、错误处理等功能。axios也提供了丰富的配置选项，例如请求超时时间、请求头、响应类型等。它可以同时处理浏览器中的XHR请求和Node.js中的http请求，并且具有很好的API设计。 React、Vue等现代JavaScript框架中也经常使用axios来进行HTTP请求，如果您使用这些框

wyzqhhhh

1427人浏览 · 2023-04-23 19:50:08

wyzqhhhh · 2023-04-23 19:50:08 发布

一、xhr异步老祖

XMLHttpRequest（简称XHR）是一种在JavaScript中创建异步请求的技术。XHR对象可以向服务器发送请求，并获取服务器返回的数据，而不会使页面刷新。

XHR对象的创建方式通常是通过构造函数，例如：

1、创建ajax对象
var xhr = new XMLHttpRequest();
2、用ajax对象的open方法设置连接服务器的参数
xhr.open( method,url,async);
method:请求类型，post或get
url：请求文件的具体地址
async:：是否异步（true为异步，false为同步）
3、设置发送数据的头部，一般用来说明数据格式，如：
xhr.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);
注： multipart/form-data（一般在发送文件时使用，以二进制形式发送）和application/json（发送json格式数据）
4、发送请求，xhr.send(数据)
方法参数中get方法时添null或不添，推荐用post方法
5、判断通讯状态或接收返回数据，这个是写在第三个步骤回调函数里边的
————————————————

//创建XMLHttpRequest对象
var xhr;
if (window.XMLHttpRequest) {
   //非IE6
   xhr = new XMLHttpRequest();
} else {
   xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.open("get","servlet?name=testParam",true);// open必须放在最前面，第一个参数指定post或者get请求
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("id=123456");

xhr.onreadystatechange()：用于指定当readyState属性发生变化时调用的函数。

xhr.onreadystatechange=function(){
   if(xhr.readyState == 4 && xhr.status == 200) {
       var result = xhr.responseText;
       alert(result);
}
}

请求的结果可以在xhr.responseText中获取到，如果想在页面的某处展示这个结果，可以将其设置到HTML元素的innerText或innerHTML属性中。请注意，由于XHR对象已被废弃，如果可能的话，请尝试使用fetch、axios或jQuery等现代方法来处理异步请求。
————————————————

二、jquery
jQuery是JavaScript库。它使得JavaScript编程变得更加简单，并且可以跨浏览器工作。

jQuery提供了各种实用的DOM操作方法和事件处理函数，使得在网页上实现各种交互效果变得轻而易举。例如，可以很方便地选择元素、修改元素样式、处理表单和处理Ajax异步请求等。 jQuery使用源语言的创新NoConflict方式解决了多库共存的问题。

$.Ajax()
$.ajax({
type:"GET",//请求方式为get或者post
url:"servletUrl",//请求的url
data:{name:"zhangSan"},//发送到服务器的参数
dataType:"text",//服务器响应的数据类型
success:function(data){
alert(data);
}

})

三、fetch

fetch是一种基于Promise的API，用于发送和接收HTTP请求。它可以用于获取数据、提交数据等，并支持Blob、JSON等数据类型。fetch方法被广泛运用于Web前端开发，特别是在React、Vue等现代JavaScript框架中。请注意，fetch在处理跨域请求时有一些限制，需要在服务器端或通过CORS等方式进行支持。如果在老旧的浏览器上运行fetch时，可能需要使用像unfetch这样的polyfill库。

四、axios

axios是一种基于Promise的HTTP库，用于浏览器和Node.js中发送HTTP请求。它可以同时处理浏览器中的XHR请求和Node.js中的http请求，并且具有很好的API设计。

axios支持各种请求类型，如GET、POST、PUT等，并支持并发请求、请求取消、请求拦截、响应拦截、错误处理等功能。axios也提供了丰富的配置选项，例如请求超时时间、请求头、响应类型等。

React、Vue等现代JavaScript框架中也经常使用axios来进行HTTP请求，如果您使用这些框架，建议使用npm安装axios并通过模块化方式引入。

————————————————

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

</head>

<body>

<div>
<button οnclick="testXhr()">testXhr</button><br>
<button οnclick="testFetch()">testFetch</button><br>
<button οnclick="testJquery()">testJquery</button><br>
<button οnclick="testAxios()">testAxios</button><br>
</div>

function testXhr() {
// 创建一个XHR对象
var xhr = new XMLHttpRequest();

// 设置请求方式和请求地址
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1');

// 设置回调函数，处理异步响应
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};

// 发送异步请求
xhr.send();
}

function testFetch() {
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
}

}

function testAxios() {
axios.get('https://jsonplaceholder.typicode.com/posts/1')
.then(response => console.log(response.data))
.catch(error => console.error(error));
}

</script> </body> </html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^