ajax回调函数ifelse,实现AJAX及用Promise解决回调函数命名问题
html代码:
js代码:
window.jQuery=function(){}
window.jQuery.ajax = function({method, url, body, headers, successFn, failFn}){ //ES6的解构赋值
let request = new XMLHttpRequest()
request.open(method, url)
request.onreadystatechange = function(){
if(request.readyState === 4){
if(request.status >=200 && request.status <300){
successFn.call(undefined, request.responseText)
}else if(request.status >= 400){
failFn.call(undefined, request)
}
}
}
request.send(body)
}
myButton.addEventListener('click',function(){
window.jQuery.ajax({
method: 'POST',
url: '/xxx',
body: 'a=1&&b=2',
headers: {
'content-type': 'x-www-form-urlencoded',
'frank': '18'
},
successFn:(responseText)=>{console.log("success")},
failFn:(request)=>{console.log("fail")}
})
})
使用上面这种方式有一个问题,成功和失败都有一个函数,这个函数名每次都需要另取,不规范。我们采用Promise就可以解决这个问题。
window.jQuery=function(){}
window.jQuery.ajax = function({method, url, body, headers, successFn, failFn}){
return new Promise(function(resolve, reject){
let request = new XMLHttpRequest()
request.open(method, url)
request.onreadystatechange = function(){
if(request.readyState === 4){
if(request.status >=200 && request.status <300){
resolve.call(undefined, request.responseText)
}else if(request.status >= 400){
reject.call(undefined, request)
}
}
}
request.send(body)
})
}
myButton.addEventListener('click',function(){
window.jQuery.ajax({
method: 'POST',
url: '/xxx',
body: 'a=1&&b=2',
headers: {
'content-type': 'x-www-form-urlencoded',
'frank': '18'
}
}).then(
(responseText)=>{console.log("success")},
(request)=>{console.log("fail")}
)
})
这样如果成功或者失败后有多个函数需要执行,可以继续.then()。
ajax回调函数ifelse,实现AJAX及用Promise解决回调函数命名问题相关推荐
- 使用promise解决回调地狱_回调地狱的由来和如何利用promise解决回调地狱
var fs =require('fs') fs.readFile('./a.txt', 'utf8',function(err,data){ if(err){ console.log('读取失败') ...
- Promise(解决回调地狱)
Promise() 对象: 存在三种状态: //进行时 pending// 成功 resolve//失败 reject 执行语句: let promise= new Promise((resolve, ...
- promise解决回调地狱(callback hell)
promise解决回调地狱(callback hell) 具体参考 阮一峰,ES6标准入门 在我们需要对一个异步操作进行频繁的调用的时候,且要保证一步操作的顺序,可能会出现 回调地狱(callback ...
- Promise的基础使用与生成器配合Promise解决回调地狱
经过几天对Promise的了解,希望可以帮助到大家. 什么是回调地狱 说起回调地狱 首先想到的是异步 在js中我们经常会大量使用异步回调,常用的ajxa请求 来看下面这段代码: fun ...
- Promise解决回调地狱写法
这里可以使用Promise来解决回调地狱的问题! 那么我们这里有一个需求,就是我们需要读取三个 .txt 文件,需要第一个文件读取完成后才能读取第二个文件以此类推. 那么这里来一个Promise的错误 ...
- promise解决回调地狱的问题
什么是回调地狱 怎么解决回调地狱的问题 要了解什么是回调地狱,首先要了解 什么是同步,什么是异步函数 同步函数:当一个函数是同步执行时,那么当该函数被调用时不会立即返回,直到该函数要做的事情全部做完之 ...
- Promise解决回调地狱
一.Promise是什么 Promise 其实是异步编程的一种解决方案.简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise 是一个对象,可以从 ...
- node js Bluebird 简单介绍 promise 解决回调地狱
Promise是异步代码实现控制流的一种方式.这一方式可以让你的代码干净.可读并且健壮. 异步回调如下: fs.readFile('directory/file-to-read', function( ...
- 异步API中promise解决回调地狱问题和异步函数async终极解决方案
最新文章
- Linux磁盘分区管理(转载)
- json 是个什么东西?
- [转]通过脚本添加登陆/注销/开机/关机脚本
- 五项管理行动日志_迈向学习型组织,企业必须具备五项修炼
- 杭电oj2072,2091字符串java实现
- 使用Pocsuite3
- 78.Subsets
- What is the difference between a domain and web hosting? (域名和虚拟主机)
- nodejs的简单爬虫
- CheckBox组件
- c语言课程设计实训主要目的,C语言课程设计实训指导书.doc
- matlab分析分子动力学,分子动力学程序框架
- mysql客户端navicat怎么连接_Navicat使用详解(mysql客户端工具)
- 周鸿伟揭秘华为事件,美国针对华为另有打算
- 仿鱼爪新媒交易账号过户转让平台源码担保第三方账号交易系统公众号服务号抖音快手小红书
- 少儿学编程系列---如何使用turtle画鸡蛋
- 基于STM32设计的智慧浇花系统(华为云IOT)
- 读文章笔记(八):多模态情感分析数据集整理
- 精简我们的apk的方法
- SEO 小白攻略 to replace