es6 宽度(ES6中 Promise 概念、基本用法和封装ajax(json数据使用))
目录
一 、定义
1.对象的状态不受外界影响 。
2.一旦状态改变了就不会在变 ,也就是说任何时候Promise都只有一种状态 。
二 、基础用法(Proimse.prototype.then() 、Promise.prototype.catch())
Proimse.prototype.then()
Promise.prototype.catch()
三 、json的使用(需要先了解)
四 、ajax的基础使用
1.基本流程
2.基本使用
3.用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); })创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!