ES6中 Promise 概念、基本用法和封装ajax(json数据使用)

简介: Promise是异步编程的一种解决方案,可以替代传统的解决方案--回调函数和事件。ES6统一了用法,并原生提供了Promise对象。

目录


一、定义


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);
})


相关文章
|
1月前
|
JSON API 数据格式
淘宝拍立淘按图搜索API系列,json数据返回
淘宝拍立淘按图搜索API系列通过图像识别技术实现商品搜索功能,调用后返回的JSON数据包含商品标题、图片链接、价格、销量、相似度评分等核心字段,支持分页和详细商品信息展示。以下是该API接口返回的JSON数据示例及详细解析:
|
1月前
|
JSON 算法 API
Python采集淘宝商品评论API接口及JSON数据返回全程指南
Python采集淘宝商品评论API接口及JSON数据返回全程指南
|
1月前
|
JSON API 数据安全/隐私保护
Python采集淘宝拍立淘按图搜索API接口及JSON数据返回全流程指南
通过以上流程,可实现淘宝拍立淘按图搜索的完整调用链路,并获取结构化的JSON商品数据,支撑电商比价、智能推荐等业务场景。
|
1月前
|
JSON 中间件 Java
【GoGin】(3)Gin的数据渲染和中间件的使用:数据渲染、返回JSON、浅.JSON()源码、中间件、Next()方法
我们在正常注册中间件时,会打断原有的运行流程,但是你可以在中间件函数内部添加Next()方法,这样可以让原有的运行流程继续执行,当原有的运行流程结束后再回来执行中间件内部的内容。​ c.Writer.WriteHeaderNow()还会写入文本流中。可以看到使用next后,正常执行流程中并没有获得到中间件设置的值。接口还提供了一个可以修改ContentType的方法。判断了传入的状态码是否符合正确的状态码,并返回。在内部封装时,只是标注了不同的render类型。再看一下其他返回的类型;
157 3
|
1月前
|
JSON Java Go
【GoGin】(2)数据解析和绑定:结构体分析,包括JSON解析、form解析、URL解析,区分绑定的Bind方法
bind或bindXXX函数(后文中我们统一都叫bind函数)的作用就是将,以方便后续业务逻辑的处理。
264 3
|
3月前
|
前端开发 JavaScript API
一文吃透 Promise 与 async/await,异步编程也能如此简单!建议收藏!
在前端开发中,异步编程至关重要。本文详解了同步与异步的区别,通过生活化例子帮助理解。深入讲解了 Promise 的概念、状态及链式调用,并引入 async/await 这一语法糖,使异步代码更清晰易读。还介绍了多个异步任务的组合处理方式,如 Promise.all 与 Promise.race。掌握这些内容,将大幅提升你的异步编程能力,写出更优雅、易维护的代码,助力开发与面试!
245 0
一文吃透 Promise 与 async/await,异步编程也能如此简单!建议收藏!
|
3月前
|
前端开发 JavaScript API
JavaScript异步编程:从Promise到async/await
JavaScript异步编程:从Promise到async/await
463 204
|
前端开发 JavaScript 开发者
Async 和 Await 是基于 Promise 实现
【10月更文挑战第30天】Async和Await是基于Promise实现的语法糖,它们通过简洁的语法形式,借助Promise的异步处理机制,为JavaScript开发者提供了一种更优雅、更易于理解和维护的异步编程方式。
261 1
|
9月前
|
前端开发
使用 async/await 结合 try/catch 处理 Promise.reject()抛出的错误时,有什么需要注意的地方?
使用 async/await 结合 try/catch 处理 Promise.reject()抛出的错误时,有什么需要注意的地方?
410 57