位置: IT常识 - 正文
ES6中 Promise 概念、基本用法和封装ajax（json数据使用）(es6 promise是什么)
编辑：rootadmin目录
一、定义
1.对象的状态不受外界影响。
2.一旦状态改变了就不会在变，也就是说任何时候Promise都只有一种状态。
二、基础用法(Proimse.prototype.then()、Promise.prototype.catch())
Proimse.prototype.then()
Promise.prototype.catch()
三、json的使用（需要先了解）
四、ajax的基础使用
1.基本流程
2.基本使用
3.用promise封装
一、定义
推荐整理分享ES6中 Promise 概念、基本用法和封装ajax（json数据使用）(es6 promise是什么)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:promise es6的作用,promise es6的作用,es6的promise有几种状态,es6promise用法例子,es6 promise是什么,es6的promise的用法,es6的promise的用法,es6的promise有几种状态,内容如对您有帮助，希望把文章链接给更多的朋友！
Promise是异步编程的一种解决方案，可以替代传统的解决方案--回调函数和事件。ES6统一了用法，并原生提供了Promise对象。作为对象，Promise有一下两个特点：
1.对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败），一旦发生改变就只有一种状态：Pending -> Fulfilled Pending -> Rejected。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。
2.一旦状态改变了就不会在变，也就是说任何时候Promise都只有一种状态。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。
二、基础用法(Proimse.prototype.then()、Promise.prototype.catch())
Promise 通过new关键词 回调函数有两个形参 第一个：resolve(成功) reject(失败的方法)resolve reject这两个可以改变Promise实例的状态
Proimse.prototype.then()它的作用是为 Promise 实例添加状态改变时的回调函数。补充可以链式。
Promise.prototype.catch()用于指定发生错误时的回调函数。
//Promise 通过new关键词 回调函数有两个形参 第一个：resolve(成功) reject(失败的方法)//resolve reject这两个可以改变Promise实例的状态const MyPormise = new Promise((resolve,reject)=>{let flag = true;if(flag){//成功的状态resolve("成功的值");}else{//失败状态reject("失败的值");}});//获取 Promise的值，有两个参数，第一个参数：回调函数显示成功的状态，第二个是显示失败的状态MyPormise.then( //Proimse.prototype.then()resolve=>console.log(resolve),reject=>console.log(reject))//MyPormise.catch( //Promise.prototype.catch()//reject=>console.log(reject)//) 三、json的使用（需要先了解）let Person = '{"realname":"张三","age":19}';//对象的json数据格式console.log(JSON.parse(Person));let persons = '["张三","李四"]' //数组的json数据格式console.log(JSON.parse(persons));四、ajax的基础使用1.基本流程用get打开请求地址
发送请求send（）
监听状态的变化，从而获取数据
2.基本使用const ajax = new XMLHttpRequest();// 1.用get打开请求地址ajax.open("GET","http://127.0.0.1:8848/web2209/ES6/test.json");// 2.发送请求ajax.send();//3.监听状态的变化，从而获取数据ajax.onreadystatechange = ()=>{if(ajax.readyState == 4){ //xml的状态if(ajax.status==200){//代表成功const data = JSON.parse(ajax.response);console.log(data);}else{console.log("请求失败");}}}3.用promise封装封装函数可以方便下一次的调用
function sendajax(url){return new Promise((resolve,reject)=>{const Obj = new XMLHttpRequest();Obj.open("GET",url);Obj.send();Obj.onreadystatechange = ()=>{if(Obj.readyState==4){if(Obj.status==200){//http状态码const data = JSON.parse(Obj.response);resolve(data);}else{reject("数据请求失败...");}}}})}const MyPromise = sendajax("http://127.0.0.1:8848/web2209/ES6/test.json");MyPromise.then((resolve)=>{console.log(resolve);})上一篇：html多个好看的背景动态效果（附源码）(html多页面)
下一篇：这几个SQL语法的坑，你踩过吗(这几个sql语法的区别)
