• 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 -> FulfilledPending -> 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)
    //		)
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    三、json的使用(需要先了解)

    let Person = '{"realname":"张三","age":19}';//对象的json数据格式
    console.log(JSON.parse(Person));
    
    let persons = '["张三","李四"]'  //数组的json数据格式
    console.log(JSON.parse(persons));
    
    • 1
    • 2
    • 3
    • 4
    • 5

    四、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("请求失败");
    		}
    					
    }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    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);
    })
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
  • 相关阅读:
    基于PHP+MySQL的企业员工培训管理系统
    killall -9用途用法
    开源消息引擎系统 Kafka 3新特性,一文带你了解
    9.18算法
    【排序算法】冒泡排序
    最近石家庄爆火的社区团购模式系统,你知道吗?
    061:vue+openlayer画点、线、圆、多边形( 代码示例 )
    关于使用elementUI中select和el-checkbox-group的回显问题
    Mac 使用 Homebrew 安装 Python3
    上一次梦见小时候
  • 原文地址:https://blog.csdn.net/m0_67402731/article/details/126012654