利用promise及参数解构封装ajax请求的方法
1.前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/**
* type: get/post
* url: http://localhost:3000 http://localhost:3000/details http://localhost:3000/users
* data: lid=5 / uname=lili&upwd=123456
* dataType: '' / 'json', 如果服务端返回的是json格式字符串，就通过dataType通知ajax函数自动转换为对象
* **/
ajax({
type: 'get',
url: 'http://localhost:3000',
dataType: 'json'
})
// data 不写在解构时值默认为 data: undefined
ajax({
type: 'get',
url: 'http://localhost:3000/details',
data: 'lid=0',
dataType: 'json'
})
ajax({
type: 'post',
url: 'http://localhost:3000/users',
data: 'uname=lili&upwd=123456',
}).then(function(res){
alert(res)
})
// dataType 不写在解构时值默认为 dataType: undefined
function ajax({type, url,data, dataType}){
return new Promise(function(open){
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
if(dataType === 'json'){
var res = JSON.parse(xhr.responseText)
}else{
var res = xhr.responseText
}
console.log(res)
open(res)
}
}
if(type === 'get' && data !== undefined){
url += `?${data}`
}
xhr.open(type, url, true)
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
if(type === 'get'){
xhr.send()
}else{
xhr.send(data)
}
})
}
</script>
</body>
</html>
另：ajax实际代码实现如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
console.log(xhr.responseText)
}
}
xhr.open('get', 'http://localhost:3000', true)
xhr.send()
</script>
</body>
</html>
2.后端代码
1) 创建一个后端项目
2) 在routes下创建index.js,users.js，代码如下
// index.js
var express = require('express');
var router = express.Router();
/* GET home page. */
var products = [
{
lid:1,
pname:'笔记本',
price:3400
},
{
lid:2,
pname:'手机',
price:5400
},
{
lid:3,
pname:'iPad',
price:6400
}
]
router.get('/', function(req, res, next) {
res.send(products)
});
router.get('/details', function(req, res, next){
var lid = req.query.lid
res.send(products[lid])
})
module.exports = router;
// user.js
var express = require('express');
var router = express.Router();
/* GET users listing. */
router.post('/', function(req, res, next) {
var uname = req.body.uname
var upwd = req.body.upwd
if(uname === 'lili' && upwd === '123456'){
res.send('登陆成功')
}else{
res.send({
code: 0,
message: '用户名或密码错误'
})
}
});
module.exports = router;
3.注：
为避免跨域，可将前端代码和后端同时放在一个项目内，使用同一地址，再发送请求调取接口
到此这篇关于利用promise及参数解构封装ajax请求的文章就介绍到这了,更多相关promise封装ajax请求内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
用Promise解决多个异步Ajax请求导致的代码嵌套问题(完美解决方案)
问题 前端小同学在做页面的时候,犯了个常见的错误:把多个Ajax请求顺序着写下来了,而后面的请求,对前面请求的返回结果,是有依赖的.如下面的代码所示: var someData; $.ajax({ url: '/prefix/entity1/action1', type: 'GET' , async: true, contentType: "application/json", success: function (resp) { //do something on response
-
js使用Promise实现简单的Ajax缓存
业务场景 在不少业务场景下,我们需要实现简单的请求缓存(即某个请求只发起一次请求),例如上传 Token 的获取.获取配置的接口等. 这些接口可以通过 Promise 实现简单的缓存并能够控制更新,而不需要另外引入缓存层. 示范代码 用七牛上传作例子,一般我们会把七牛上传封装为一个单独的 Upload 组件,外部只需要调用组件,而 token 的获取封装到组件内部实现. //Upload.vue let fetchToken = null; export default { data() { r
-
利用promise及参数解构封装ajax请求的方法
1.前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </hea
-
AngularJS实现ajax请求的方法
本文实例讲述了AngularJS实现ajax请求的方法.分享给大家供大家参考,具体如下: [HTML 代码] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1"> &
-
js与jQuery终止正在发送的ajax请求的方法
本文实例讲述了js与jQuery终止正在发送的ajax请求的方法.分享给大家供大家参考,具体如下: 核心:调用XMLHttpRequest对象上的abort方法 jquery的ajax方法有自己的超时时间设置参数: $.ajax({type:'POST', url:'b.php', data:'', timeout:5000, success:function(){ } }) 同时 1. $.get返回的数据类型是XMLHttpRequest,请参考手册.($.post.$.ajax.$.get
-
jQuery实现监控页面所有ajax请求的方法
本文实例讲述了jQuery实现监控页面所有ajax请求的方法.分享给大家供大家参考,具体如下: 你是不是有遇到这样的问题:页面发起两个ajax请求,希望它们都成功以后,再做一个动作? 很容易想到的解决方案是,等其中一个结束以后,再发起另外一个,这个过程用回调函数来完成. 但是,如果其中一个ajax请求的代码不是你写,你改不了,怎么办? 又或者说,你只想知道某个url请求什么时候结束,不想管其他的请求,怎么弄? <!DOCTYPE html> <html lang="en&quo
-
php判断是否为ajax请求的方法
本文实例讲述了php判断是否为ajax请求的方法.分享给大家供大家参考,具体如下: 先说前端使用 jQuery 时怎么区分: jQuery 发出 ajax 请求时,会在请求头部添加一个名为 X-Requested-With 的信息,信息内容为:XMLHttpRequest 在后端可以使用 $_SERVER["HTTP_X_REQUESTED_WITH"] 来获取.(注意:中划线换成了下划线,不区分大小写) 由此,我们可以这样来判断是否为 ajax 请求: if(isset($_SERV
-
jQuery取消ajax请求的方法
本文实例讲述了jQuery取消ajax请求的方法.分享给大家供大家参考.具体分析如下: 这里需要注意的是,在ajax请求未响应之前可以用xhr.abort()取消,但如果请求已经到达了服务器端,这样做的结果仅仅是让浏览器不再监听这个请求的响应,但服务器端仍然会进行处理 var xhr = $.ajax({ type: "POST", url: "test.php", data: "name=test", success: function(msg
-
php检查是否是ajax请求的方法
本文实例讲述了php检查是否是ajax请求的方法.分享给大家供大家参考.具体如下: 通过这段代码可以判断用户的请求是否来自AJAX XMLHttpRequest,以区别普通post,get和ajax function isAjax() { return (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest')); } 希望本文所述对大家的php程序
-
jQuery进阶实践之利用最优雅的方式如何写ajax请求
前言 jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 首先需要一个配置文件 var api = { basePath: 'http://192.168.200.226:58080', pathList: [ { name: 'agentHeartBeat',
-
实例讲解使用原生JavaScript处理AJAX请求的方法
Ajax 是异步的JavaScript和XML的简称,是一种更新页面某部分的机制.它赋予了你从服务器获取数据后,更新页面某部分的权力,从而避免了刷新整个页面.另外,以此方式实现页面局部更新,不仅能有效地打造流畅的用户体验,而且减轻了服务器的负载. 下面是对一个基本的 Ajax 请求进行剖析: var xhr = new XMLHttpRequest(); xhr.open('GET', 'send-ajax-data.php'); xhr.send(null); 在这里, 我们创建了一个能向服务
-
jquery中AJAX请求 $.post方法的使用
使用jQuery的$.post方法可以以POST形式向服务器发起AJAX请求.$.post方法是jQuery的实用工具方法. post和get发送方式的特点, GET 方法提交数据不安全,数据置于请求行,客户端地址栏可见; GET 方法提交的数据大小限制在255 个字符之内.POST方法提交的数据置于消息主体内,客户端不可见, POST 方法提交的数据大小没有限制. $.post方法语法 $.post(url,parameters,callback) 参数 url (字符串)服务器端资源地址