利用promise及参数解构封装ajax请求的方法


Posted in Javascript onMarch 24, 2021

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) 创建一个后端项目

利用promise及参数解构封装ajax请求的方法

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.注:

为避免跨域,可将前端代码和后端同时放在一个项目内,使用同一地址,再发送请求调取接口

Javascript 相关文章推荐
JavaScript打开word文档的实现代码(c#)
Apr 16 Javascript
表格单元格交错着色实现思路及代码
Apr 01 Javascript
JQuery设置和去除disabled属性的5种方法总结
May 16 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
Jun 09 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
Aug 12 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
Oct 10 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
EditPlus中的正则表达式 实战(2)
Dec 15 Javascript
JavaScript实现图片切换效果
Aug 12 Javascript
对Angular中单向数据流的深入理解
Mar 31 Javascript
微信小程序文章详情页面实现代码
Sep 10 Javascript
微信小程序使用二次贝塞尔曲线画波浪
Dec 25 Javascript
AJAX检测用户名是否存在的方法
Mar 24 #Javascript
js正则匹配markdown里的图片标签的实现
浅谈react路由传参的几种方式
Mar 23 #Javascript
一百多行代码实现react拖拽hooks
node中使用shell脚本的方法步骤
详解如何解决使用JSON.stringify时遇到的循环引用问题
vue 中 get / delete 传递数组参数方法
Mar 23 #Vue.js
You might like
Windows下PHP的任意文件执行漏洞
2006/10/09 PHP
php cookie 登录验证示例代码
2009/03/16 PHP
php Sql Server连接失败问题及解决办法
2009/08/07 PHP
PHP学习笔记之二 php入门知识
2011/01/12 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
PHP使用file_get_contents发送http请求功能简单示例
2018/04/29 PHP
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
2012/11/13 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
JavaScript中最简洁的编码html字符串的方法
2014/10/11 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
2015/06/12 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
2015/09/07 Javascript
JavaScript遍历求解数独问题的主要思路小结
2016/06/12 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
AngularJS路由Ui-router模块用法示例
2017/05/29 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python 数据加密代码
2008/12/24 Python
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
实例解析Python中的__new__特殊方法
2016/06/02 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
Django stark组件使用及原理详解
2019/08/22 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
python与idea的集成的实现
2020/11/20 Python
laravel使用redis队列实例讲解
2021/03/23 PHP
校园网站的创业计划书范文
2013/12/30 职场文书
护士2015年终工作总结
2015/04/29 职场文书
SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用
2021/06/30 SQL Server
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python
TypeScript 使用 Tuple Union 声明函数重载
2022/04/07 Javascript
JS前端可视化canvas动画原理及其推导实现
2022/08/05 Javascript