利用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 相关文章推荐
简单的js分页脚本
May 21 Javascript
Jquery 动态循环输出表格具体方法
Nov 23 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
Jun 23 Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 Javascript
JavaScript实现显示函数调用堆栈的方法
Apr 21 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
Jan 27 Javascript
解析Vue 2.5的Diff算法
Nov 28 Javascript
原生JavaScript实现remove()和recover()功能示例
Jul 24 Javascript
使用angular-cli webpack创建多个包的方法
Oct 16 Javascript
vue源码中的检测方法的实现
Sep 26 Javascript
Vue数据双向绑定底层实现原理
Nov 22 Javascript
Vue父组件监听子组件生命周期
Sep 03 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
ubuntu 编译安装php 5.3.3+memcache的方法
2010/08/05 PHP
CodeIgniter错误mysql_connect(): No such file or directory解决方法
2014/09/06 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
浅谈php的TS和NTS的区别
2019/03/13 PHP
Track Image Loading效果代码分析
2007/08/13 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
2012/05/27 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
jQuery中data()方法用法实例
2014/12/27 Javascript
浅析javascript函数表达式
2016/02/10 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
Angular2学习笔记——详解路由器模型(Router)
2016/12/02 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
JS Input里添加小图标的两种方法
2017/11/11 Javascript
vue2.0+vue-dplayer实现hls播放的示例
2018/03/02 Javascript
微信小程序监听用户登录事件的实现方法
2019/11/11 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
2020/05/29 Javascript
vuex存取值和映射函数使用说明
2020/07/24 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
python字典多条件排序方法实例
2014/06/30 Python
Python实现网络端口转发和重定向的方法
2016/09/19 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
pandas 数据归一化以及行删除例程的方法
2018/11/10 Python
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
某公司Java工程师面试题笔试题
2016/03/27 面试题
机关门卫岗位职责
2013/12/30 职场文书
春节请假条
2014/04/11 职场文书
汉语专业毕业生自荐信
2014/07/06 职场文书
内科护士节演讲稿
2014/09/11 职场文书
2015年中学元旦晚会活动方案
2014/12/09 职场文书
赔偿协议书怎么写
2015/01/28 职场文书
红歌会主持词
2015/07/02 职场文书
Python自然语言处理之切分算法详解
2021/04/25 Python
Qt数据库应用之实现图片转pdf
2022/06/01 Java/Android