Promise是JS中进行异步编程的新的解决方案

表达：
①从语法上看：Promise是一个构造函数 (自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法)
②从功能上看：promise对象用来封装一个异步操作并可以获取其成功/失败的结果值

<button id="btn">点击事件</button>

<script>

// 生成随机数

function rand(m,n){

return Math.ceil(Math.random()*(n-m+1)) + m-1;

}

const btn= document.querySelector("#btn")

btn.addEventListener('click',function(){//添加点击事件

//Promise构造函数接受一个函数（执行器函数）作为参数，

//该函数的两个参数分别是resolve和reject。

const p = new Promise((resove,reject)=>{

setTimeout(()=>{ //包裹一个异步操作

let n = rand(1,100);

if(n<=30){

resove()

// resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”

//（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，

// 作为参数value传递出去；

}

else{

reject()

// reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”

//（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误

//，作为参数error/reason传递出去。

}

},1000)

})

//Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

p.then(()=>{

alert('成功了')

},()=>{

alert('失败了')

})

})

//then方法可以接受两个回调函数作为参数。
//第一个回调函数onResolved()是Promise对象的状态变为resolved时调用
//第二个回调函数onRejected()是Promise对象的状态变为rejected时调用
//这两个函数都是可选的，不一定要提供。它们都接受Promise对象传出的值作为参数

</script>

promise 与 Ajax封装

<div>promise 与 Ajax封装</div>
<script>function sentAjax(url,data){return(new Promise((resolve,reject)=>{// resolve(1)let xhr = new XMLHttpRequest()xhr.onreadystatechange =()=>{if(xhr.readyState === 4){if(xhr.status >= 200 && xhr.status<300){resolve(xhr.response)}else{reject('出错了')}}}// 整理url中的参数let str='' for(key in data){str += `${key}=${data[key]}`}xhr.open('GET',url+'?'+ str)xhr.responseType="json"xhr.send()}).then((value)=>{console.log('成功了',value)},(reason)=>{console.log(reason)}))}sentAjax('https://api.github.com/search/users',{q:2})
</script>

Promise 的状态， promise 指定多个成功/失败回调函数，都会调用吗？_Allen 赵奇隆的博客-CSDN博客

Promise基本使用，promise 与 Ajax封装相关推荐

Promise 的基本使用与 Ajax的jQuery封装
Promise 的基本使用为了解决回调地狱问题,从而给出的解决办法: /*** Promise** 1. Promise 是一个构造函数 new Vue()* 2. Promise() 里面有个参 ...
Promise解决多个异步Ajax请求导致的代码嵌套问题(完美解决方案)
这篇文章主要介绍了用Promise解决多个异步Ajax请求导致的代码嵌套问题(完美解决方案),需要的朋友可以参考下问题前端小同学在做页面的时候,犯了个常见的错误:把多个Ajax请求顺序着写下来了, ...
Vue之Axios AJAX封装
来源:我的博客站 OceanicKang |<Vue 之 Axios AJAX封装> 前言才不要写前言,Axios 中文文档 https://www.kancloud.cn/yunye/ ...
js之- 简解Promise的resolved，rejected，Promise.all 和Promise.race（知识记录）
1- Promise的三种状态: 1- Pending(等待,未完成,进行中) 2- Resolved(成功) 3- Rejected(失败) 2- Promise的三种状态关系变化只有两种: 1- ...
jQuery的ajax封装函数
阐述: 在开发的时候,我们会频繁调ajax,但是jQuery又不能使用promise,不遵循ES6的标准.所以很烦. 只能靠自己封装一下ajax来解决下ajax频繁写的过程.也便于日后维护. 封装aj ...
【ES6】什么是Promise？解析Promise的基本用法
Promise介绍 Promise 是异步编程的一种解决方案,比传统的解决方案(回调函数和事件)更合理和更强大.它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise ...
如何将小程序内置非promise API转换为promise对象（风袖小程序的学习）
非常重要,便于项目大局观,使用es7的 async和await 如何将小程序内置非promise API转换为promise 这里是我封装的一个wx.request函数如何将wx.request转换成 ...
Promise: 手写Promise
前言 ES6里的Promise是个原理性蛮复杂但是使用起来很简单的异步解决方案.我们有必要系统.深入的学习Promise的使用规则,并能根据规则手动实现一个完整的Promise,下面我们就根据官方的规 ...
promise的优点promise.all(),promise.race(),promise.allSettled()的原理
Promise也是使用回调函数,只不过是把回调封装在了内部,使用上一直通过 then 方法的链式调用,使得多层的回调嵌套看起来变成了同一层的,书写上以及理解上会更直观和简洁一些.Promise出现之前 ...

Promise基本使用，promise 与 Ajax封装

promise 与 Ajax封装

Promise基本使用，promise 与 Ajax封装相关推荐

最新文章

热门文章

Promise基本使用 ，promise 与 Ajax封装

promise 与 Ajax封装

Promise基本使用 ，promise 与 Ajax封装相关推荐

最新文章

热门文章

Promise基本使用，promise 与 Ajax封装

Promise基本使用，promise 与 Ajax封装相关推荐