最近在学习ES6的相关知识,看完了Promise,于是打算用Promise实现一个原生JS的Ajax例子,顺便复习一下Node的相关知识。...public文件夹和server.js同级。...开始撸 在index.html中开始撸Promise code: <!...写的Ajax的POST请求,GET请求就不写了。...Promise还是挺好用的。 运行结果 ?
AJAX简介AJAX(Asynchronous JavaScript and XML)是一种用于在后台与服务器进行异步数据交互的技术。...常用的AJAX请求方法有XMLHttpRequest对象和fetch函数。在本文中,我们将使用fetch函数作为示例来封装AJAX请求。...封装AJAX请求为Promise下面是将AJAX请求封装为Promise的代码示例:function ajaxRequest(url, options) { return new Promise((resolve...在Promise的执行器函数中,我们使用fetch函数进行实际的AJAX请求。...使用Promise封装的AJAX请求现在我们可以使用封装好的ajaxRequest函数来发送AJAX请求,并处理请求的结果和错误。
回调、使用Promise封装ajax()、Promise入门 1 回调是啥 call a function call a function back callback 看这里:Callback(回调)是什么...下一篇博客再详细记录吧 3. $.Ajax()Promise 是什么?如何用? 「每日一题」Promise 是什么?...代码都在这里 3.1 $.Ajax()中的promise 如果不使用promise,$.ajax请求的时候成功和失败的回调函数是写在参数里的,他是对象参数的一个值 $.ajax({ method...以上就是ajax中promise的简单使用,那么如何自己封装一个呢?...4封装一个类似$.Ajax()中的Promise的简易版本(皮毛,以后深入) 接下来回到我们自己封装的jQuery.Ajax()代码.我们以此为基础继续来封装promise 以前封装的代码在这里 也可以看我前一篇博客
Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。 # 描述 一个 Promise 对象代表一个在这个 promise 被创建出来时不一定已知的值。...# Promise 的链式调用 我们可以用 promise.then(),promise.catch() 和 promise.finally() 这些方法将进一步的操作与一个变为已敲定状态的 promise...返回一个 promise,该 promise 在所有 promise 完成后完成。并带有一个对象数组,每个对象对应每个 promise 的结果。...# Promise.any(iterable) (opens new window) 接收一个 Promise 对象的集合,当其中的一个 promise 成功,就返回那个成功的 promise 的值。...失败,那么 Promise.all 返回的 promise 对象失败 在任何情况下,Promise.all 返回的 promise 的完成状态的结果都是一个数组 Promise.all = function
.1.promise基本用法 const promise =new Promise((resolve,reject)=>{...Promise正是通过这两个状态来控制异步操作的结果。...如下: 3.使用promise来解决回调地狱的问题 服务端部分代码 //基于Promise处理ajax请求 function queryData(url){...xhr.open('get',url); xhr.send(); } ) } //发送一个ajax...console.log(data) },function(data){ console.log(data) }) //发送多个ajax
Ajax,Promise,Fetch,Axios的区别 说起他们的区别我们首先要知道,js中什么是同步执行和异步执行?...从而引入异步处理,使代码无需等待,继续处理其他代码,直到其他程序处理完毕,js再继续之前的工作 早期处理的思路 js中的一部主要是通过事件和回调函数实现的,但是这种方式会存在一些问题 //为了方便演示,...Ajax Ajax作为js中早期的发送异步请求的方式,翻译过来就是异步的JS和XML的意思,目前用的较少 document.querySelector("button").addEventListener...Promise 为了解决一部带来的问题,js推出新对象promise,专门用来存储异步代码对象,他可以确保异步代码的执行和返回结果 Promise的回调函数可以指定两个参数 resolve :在代码正常执行时...Fetch fetch是官方的发送异步请求的工具,基于promise,相较于ajax更加方便 document.querySelector("button").addEventListener("click
前提 观看该文章之前,你需要具备的知识有: Promise的使用,包含 Promise#then,Promise#catch,Promise.resolve,Promise.reject; XHR 的使用...在 Ajax 编程中 XMLHttpRequest 被大量使用。 ? XMLHttpRequest()该构造函数用于初始化一个 XMLHttpRequest 对象。...encodeURIComponent(value); pairs.push(name + '=' + value); } return pairs.join('&'); } // 创 Ajax...encodeURIComponent(value); pairs.push(name + '=' + value); } return pairs.join('&'); } // 创 Ajax...window.ActiveXObjext) { xObj = new ActiveXObject(); } return xObj; } // get封装 function ajax
原生ajax 原文链接:http://caibaojian.com/ajax-jsonp.html 一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRe...… JS原生ajax与Jquery插件ajax深入学习 序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来...动态网页:是指可以通过服务器语言结合数 … JS原生Ajax&;Jquery的Ajax技术&;Json 1.介绍Ajax Ajax = 异步 JavaScript 和 XML...删除用户,使用了js原生ajax 主要复习了php的pdo数据库操作,和js的ajax,真麻烦,希望jquery的ajax简单点. index.php: 1 2 [代码]JS原生...Ajax,GET和POST javascript/js的ajax的GET请求: Jquery学习笔记(10)–ajax删除用户,使用了js原生ajax 主要复习了php的pdo数据库操作,
当使用Promise封装AJAX请求时,我们可以将AJAX请求的结果作为Promise对象的解决值或拒绝原因,以便更好地管理和处理请求的结果。...一个Promise对象有三种状态:待定(pending)、已完成(fulfilled)和已拒绝(rejected)。当一个Promise对象处于待定状态时,它可以转换为已完成或已拒绝状态。...语法以下是使用ES6 Promise封装AJAX请求的基本语法:const makeAjaxRequest = (url, method) => { return new Promise((resolve...在执行器函数中执行AJAX请求,并根据请求结果调用resolve或reject。示例让我们通过一个示例来理解如何使用ES6 Promise封装AJAX请求。...在Promise的执行器函数中,我们使用XMLHttpRequest对象执行AJAX请求,并根据请求的结果调用resolve或reject。
这就好像ajax里面当ajax请求成功就会调用success函数,请求失败则调用error函数。同样的.catch()也有两种写法,只是.catch()只有一个参数而已。...四、Promise与异步 Promise是异步的。js异步操作是通过js的事件循环机制EventLoop实现的。...对于异步任务来说,当其可以被执行时,会被放到一个 任务队列(task queue) 里等待JS引擎去执行。...当执行栈中的所有同步任务完成后,JS引擎才会去任务队列里查看是否有任务存在,并将任务放到执行栈中去执行,执行完了又会去任务队列里查看是否有已经可以执行的任务。...after");//同步任务 } testFn(); 上图结果证明了上述所说的js的执行顺序 。
Promise是什么?...抽象表达: Promise是ES6中新增的规范; Promise是js中异步编程的新解决方案(旧方案采用函数回调); 具体表达: 从语法上说:Promise是一个构造函数; 从功能上说:Promise...promise 对象; 说明:返回一个成功/失败的 promise 对象; //创建promise.resolve对象 //如果传入的对象为 非promise对象 则返回的是一个 成功的promise...对象; 说明:只返回一个失败的 promise 对象; //创建promise.resolve对象 //如果传入的对象为 非promise对象 则返回的是一个 成功的promise对象 //如果传入的对象...非promise对象 则参数的结果决定了 resolve的结果 let p = Promise.reject(521); let c = Promise.reject(new Promise(
# 思路 创建 XMLHttpRequest 实例 发出 HTTP 请求 服务器返回 XML 格式的字符串 JS 解析 XML 字符串 随着历史推进,XML 已经被淘汰,取而代之的是 JSON # 版本...1 function ajax () { const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.github.com/users...string = xhr.responseText; let json = JSON.parse(string); } } }; xhr.send(); } # Promise...版本 function ajax (url) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest...screen_name=cell`; ajax(url).then(data => { console.log(data); }).catch(err => { console.log(err)
解决AJAX回调地狱 AJAX 串行带来的回调地狱 PROMISE-THEN的链式写法优雅解决 /* PROMISE 对异步编程进行管理 */ function ajax1() { return new Promise(resolve...(scoreId) { return new Promise(resolve => { $.ajax({...对异步编程进行管理 */ Promise.all([ajax1(),ajax2(),ajax3()]).then(results => { // => results...Promise.race([ajax1(),ajax2(),ajax3()]).then(result => {})
AJAX概念 AJAX是 Asynchronous JavaScript and XML 的缩写,指的是通过 JavaScript 的 异步通信,从服务器 获取 XML 文档从中提取数据,再更新当前网...xhr.response='json'; xhr.setRequestHeader("Accept","application/json"); //发送HTTP请求 xhr.send(null); 使用Promise...封装 function getJSON(url) { // 创建一个Promise对象 let promise = new Promise(function(resolve, reject) {...== 4) return; // 当请求失败或成功改变Promise状态 if (this.status === 200) { resolve(this.response);...xhr.setRequestHeader("Accept", "application/json"); // 发送http请求 xhr.send(null); }); return promise
function send(data) { createXHR(); XHR.open(“GET”, “/url/xxx”, true); //true:表示异步传输,而不等send()方法返回结果,这正是ajax...“Content-Type”,”application/x-www-form-urlencoded;”); //用POST的时候一定要有这句 */ XHR.onreadystatechange = ajax...; //当状态改变时,调用ajax这个方法,方法的内容我们另外定义 XHR.send(data); } function ajax() { if (XHR.readyState == 4) { //...关于Ajax引擎对象中的方法和属性,可以参考博文:http://www.cnblogs.com/hongfei/archive/2011/11/29/2265377.html if (XHR.status
Promise是啥? Promise是异步编程的一个解决方案,相比传统的“回调函数”方法,使用Promise更为合理和强大,避免了回调函数之间的层层嵌套,也使得代码结构更为清晰,便于维护。 ?...图:使用Promise避免"回调地狱" 2. Promise特性回顾 注:本文适用于有Promise基础并希望深入挖掘Promise特性的读者;如果想学习Promise基础,下面这两本书不错; ?...扫码获取exam01.js ~ exam09.js源码 ? 3. 实现一版Promise试试!...Promise有很多社区规范,如 Promise/A、Promise/B、Promise/D 以及 Promise/A 的升级版 Promise/A+;Promise/A+ 是 ES6 Promises...C.第3步:执行测试 npx promises-aplus-testsRookiePromiseTestAdapter.js > log.txt ? ----
Promise; 要了解其它更为高级的异步操作得先熟悉 Promise; 基于这些目的,实践了一个符合 Promise/A+ 规范的 repromise。...本札记系列总共三篇文章,作为之前的文章 Node.js 异步异闻录 的拆分和矫正。...Promise札记 Generator札记 Async札记 Promise/A+ 核心 在实现一个符合 Promise/A+ 规范的 promise 之前,先了解下 Promise/A+ 核心,想更全面地了解可以阅读...; Promise 的状态一旦转化,将不能被更改; repromise api 食用手册 Promise.resolve() Promise.resolve() 括号内有 4 种情况 /* 跟 Promise...function foo(a, b, cb) { ajax( `http://some.url?
所谓的Promise,简单的来说就是一个可以存放未来才能结束的任务或者事件。 1....Promise实列有三个状态: – pending (进行中) – resolved (成功) – rejected(失败) 当要处理某个任务的时候,promise的状态是pending,任务完成是状态就变成了...3.all() 接受一个数组作为自己的参数,数组中每一项都是一个promise对象,当数组的每一个promise状态时resolved时,all方法的状态才会变成resolved,有一个变成rejected...5finally() 他是不管promise时什么状态都会执行的都会去执行的,他不接受任何的参数。 Promise的优点: – 对象的状态不受外界的影响,只有异步的操作结果才能改变他的状态。...– 一旦状态改变就不会在变,任何时候都可以得到这个结果,就如他的名字一样promise(承诺)。 Promise的缺点: – 无法去取消promise,只要创建就会执行,无法中途去终止。
return new Promise((resolve, reject)=> { // 假设此处是异步请求某个数据 $.ajax({ url: '......
也就是set开头的最后执行,promise在set之前,promise方法里的第一个执行方法不入栈,在正常栈里执行 console.log('golb1'); setImmediate(function...(function(resolve) { console.log('immediate1_promise'); resolve(); }).then(function...(function(resolve) { console.log('timeout1_promise'); resolve(); }).then(function...(function(resolve) { console.log('glob1_promise'); resolve(); }).then(function() { console.log...glob1_nextTick glob1_then timeout1 timeout1_promise timeout1_nextTick timeout1_then immediate1 immediate1
领取专属 10元无门槛券
手把手带您无忧上云