有勇气的牛排博客
☰

Promise语法

有勇气的牛排 1210 前端 2021-11-24 20:02:22

1 介绍

做什么

  • 是一种异步编程的方案

什么时候会来异步处理时间呢？

  • 网络请求

  • 如果只是一个简单的网络请求，那么这种方案不会给我们带来很大的麻烦

// 什么情况下会用到Promise
// 一般情况下有异步操作时，使用Promist对这个异步操作进行封装
// new -> 构造函数(1.保存了一些状态信息， 2.执行传入的函数)
// 在执行传入回调函数时，会传入两个参数，rresolve，reject，本身又是函数

new Promise((resolve, reject) => {
setTimeout(() => {
  // 成功
  // resolve('hello')

  // 失败
  reject('error')
}, 1000)
}).then((data) => {
// 处理代码
console.log(data);
}).catch((err) => {
console.log(err);
})

new Promise((resolve, reject) => {
setTimeout(() => {
  resolve('hello')
  reject('error')
})
}).then(res => {
// console.log('成功')
console.log('失败')
}, err => {
console.log('失败')
console.log(res)
})

new Promise((resolve, reject) => {
setTimeout(() => {
  resolve('aaa')
}, 1000)
}).then(res => {
// 1. 自己处理10行代码
console.log(res, '第一层处理的10行代码')
// 2. 对结果进行第一次处理
// return res + '111'

throw 'error'

}).then(res => {
console.log(res, '第二层的10行处理代码');
return res + '222'
}).then(res => {
console.log(res, '第三层的10行处理代码');
}).catch(err => {
console.log(err)
})

多个异步请求处理逻辑

// 请求一
$ajax({
url: '',
success: function () {
  console.log('结果1')
  isResult1 = true
  handleResult()
}
})
// 请求二
$ajax({
url: '',
success: function () {
  console.log('结果2')
  isResult1 = true
  handleResult()
}
})

function handleResult() {
if (isResult1 && isResult2) {

}
}

Promise的all方法使用

Promise.all([
// new Promise((resolve, reject) => {
//   $ajax({
//     url: 'url1',
//     success: function () {
//       resolve(data)
//     }
//   })
// }),
// new Promise((resolve, reject) => {
//   $ajax({
//     url: 'url2',
//     success: function () {
//       resolve(data)
//     }
//   })
// })

new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('result1')
  }, 1000)
}),
new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('result2')
  }, 1000)
})


]).then(results => {
console.log(results);
})

留言

专栏
文章
加入群聊
程序员兼职接单交流
编程交流