利用promise及参数解构封装ajax请求的方法
更新时间:2021年01月07日 10:16:04 作者:Sylvia_2000
这篇文章主要介绍了利用promise及参数解构封装ajax请求的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud)
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
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请求内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家!
相关文章
菜鸟蔡之Ajax复习第二篇(JQuery中的load()方法实现Ajax功能)
在上一篇博客中写到的是在传统的Javascript中使用XMLHttpRequest对象异步加载数据的,唉,童鞋.......看到那些代码是不是有点头疼啊!呵呵......2012-11-11Ajax请求过程中下载文件在FireFox(火狐)浏览器下的兼容问题
最近做了个项目,其中有项目需求是这样的,点击一个文件链接下载该文件,同时向后台发送请求,在开发过程中问题百出,小编把问题总结分享在程序员之家平台,供大家参考2016-01-01ajax中设置contentType: "application/json"的作用
这篇文章主要介绍了ajax中设置contentType: “application/json”的作用,需要的朋友可以参考下2018-04-04
最新评论