IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> ES6中 Promise 概念、基本用法和封装ajax(json数据使用) -> 正文阅读

[JavaScript知识库]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);
})

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-07-20 18:43:07  更:2022-07-20 18:46:00 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/26 10:49:45-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码