首页 > 其他分享 >Promise

Promise

时间:2022-09-04 16:46:14浏览次数:111  
标签:状态 err res ajax Promise 方法

Promise

1、Promise有什么用?

Promise是ES6中的一个对象,用来解决异步编程问题的一种方案,在网上经常看到回调地狱问题,Promise把这种嵌套调用的形式改为链式调用的方式,使得代码维护起来容易。

回调地狱的例子

ajax({
  url: 'http://localhost:3000/news',
  data: {
     name: '张三'
  },
  success(res) => {
   ajax({
     url: 'http://localhost:3000/news',
     data: {
       id: 'res.id'
     },
     success(res) => {
       ajax({
	 ....
     })
   }
 } 
})

用Promise可改为

let p1 =  new Promise((resolve, reject) => {
 return	ajax({
   url: 'http://localhost:3000/news',
   data: {
     name: '张三'
   },
   success(res) {
     resolve(res)
   },
   error(err) {
     reject(err)
   }
}).then(res => {
   return ajax({
     url: 'http://localhost:3000/news',
     data: {
       id: 'res.id'
     },
     success(res) => {
       resolve(res.comment)
     },
     error(err) {
       reject(err)
     }
 }).then((res => {
     ....
 }).catch({
    console.log(err)
 })

改为Promise后,代码从层层嵌套变为链式,通过then方法进行连接。

2、Promise的常用方法

在上面的代码里,ajax的成功回调函数是success,失败回调函数时error;Promise也有成功的回调函数和失败时的回调函数。
查阅资料得知,Promise有三种状态:pending(执行中的状态),fulfiled
(成功状态),rejected(失败状态) pending 状态的 Promise 对象可能会变为fulfilled 状态并传递一个值给相应的状态处理方法,也可能变为失败状态(rejected)并传递失败信息。
很容易理解这三个状态,执行中的状态就是初始状态,由初始状态转变为成功或者失败,所以状态的改变就只有两条线

Promise.resolve(value)方法返回一个已给定值解析后的Promise 对象。

列子中用到的resolve方法,如果数据请求成功,它会把当前的Promise的状态该为fulfiled,方法中value会封装进Promise里

Promise.reject(err)方法返回一个带有拒绝原因的Promise对象。

如果操作执行失败,它会把当前的Promise的状态该为rejected,并把err错误信息封装进Promise里

Promise.then()和Promise.catch()

当Promise的其中任一种状态出现时,Promise 对象的 then 方法绑定的处理方法(handlers )就会被调用(then方法包含两个参数:onfulfilled 和 onrejected,它们都是 Function 类型。当Promise状态为fulfilled时,调用 then 的 onfulfilled 方法,当Promise状态为rejected时,调用 then 的 onrejected 方法
catch方法其实和then方法的第二个参数一样,失败时调用

例子中如果第一个数据请求成功,它会通过then方法再次发起数据请求,
多个Promise链式操作的错误捕获可以通过一个catch处理,在例子最后用一个catch方法来捕获

标签:状态,err,res,ajax,Promise,方法
From: https://www.cnblogs.com/ushen/p/16655329.html

相关文章

  • vue中Promise的使用方法详情 vue中 ajax 同步执行
    vue中Promise的使用方法详情目录一、使用1.promise是一种异步解决方案2.asyncawait简介:promise是什么,它可以说是异步编程的一种解决方法,就拿传统的ajax发请求来说,单个......
  • node35-promise
     constfs=require('fs');letpromise=newPromise((resolve,reject)=>{fs.readFile('./1.txt','utf8',(err,result)=>{if(err!=null)......
  • node37-promise链式编程
    constfs=require('fs');/*fs.readFile('./1.txt','utf8',(err,result1)=>{console.log(result1);fs.readFile('./2.txt','utf8',(err,result2)=......
  • Promise
    Promise是在ES6中用来解决回调地狱最好的方法。 Promise是一个构造函数,我们可以创造他的实例对象,new出来的Promise实例对象,代表一个异步操作。在Promise.prototype原型......
  • vue中Promise的使用方法详情
    vue中Promise的使用方法详情目录一、使用1.promise是一种异步解决方案2.asyncawait简介:promise是什么,它可以说是异步编程的一种解决方法,就拿传统的ajax发请求来说,单个......
  • day 26 Promise的回顾及SPA路由实现
    Promisereturn在对应的promise的函数中在promise里面的then函数(catch函数中)return相当于调用resolve。thrownewError相当于调用rejectPromise.resolve('第一个值'......
  • 深入浅出promise、await和async以及Generator系列——promise的基本语法和使用
    深入浅出promise、await和async以及Generatorpromise的语法promise的语法是es6比较复杂的一个语法,所以请耐心看完promise是面向对象思想实现的,使用的第一步需要创建一......
  • Promise的回顾及SPA路由实现
     Promise    return在对应的promise的函数中      在promise里面的then函数(catch函数中)return相当于调用resolve。thrownewError相当于调用re......
  • Promise的回顾及SPA路由实现
    Promisereturn在对应的promise的函数中在promise里面的then函数(catch函数中)return相当于调用resolve。thrownewError相当于调用rejectPromise.resolve('第一个值')......
  • 一文帮你把脉:了解自己的Promise功底(Promise笔试题)
    文本已开启银杏化模式,题目难度从简入难,非常银杏 1.1题目一constpromise1=newPromise((resolve,reject)=>{console.log('promise1')})console.log('1',p......