目录
1.什么是Promise
new Promise是同步执行
.then((=>{
)) 是异步回调
Promise 是异步编程的一种解决方案,其实是一个构造函数,自己身上有all、reject、resolve这几个方法,原型上有then、catch等方法。
Promise对象有以下两个特点。
(1)对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是Promise这个名字的由来,它的英语意思就是“承诺”,表示其他手段无法改变。
(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从pending变为fulfilled和从pending变为rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果,这时就称为 resolved(已定型)。如果改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。
promise封装小程序api请求
- 为什么封装api
因为在项目中 请求使用的地方会有很多 不利于后期维护 如果我我们讲api封装出来 只需要维护api文件就可以了
这里以uniapp封装api来写小程序为例
第一步
- 先在项目目录中创建一个utils文件夹 在该文件夹下创建一个js文件为请求的封装 代码如下
// 封装请求 const http = ({url, method='get', data=''}) => { return new Promise((resolve, reject) => { uni.request({ method, url: `公共请求地址` + url, data, success(res) { resolve(res.data) // 将请求成功后得到的数据返回出去 可以用then方法接受到数据 }, fail(err) { reject(err) // 将请求失败后返回的信息 返回出去 可以用catch方法接受到 }, complete() { } }) }) } export default http;
第二步
- 在utils文件夹下创建一个api.js 这里以请求轮播图数据的接口为例
import http from './http.js' // 请求轮播图数据的接口 export const getSwiper = () => http({url: '你们自己的请求轮播图数据的接口地址'})
第三步
- 在需要使用轮播图接口的文件中
import { getSwiper } from '../../utils/api.js' export default { data() { return { swiper: [] } }, async created() { let {message} = await getSwiper() // message就是我们请求完成后获取的数据信息 this.swiper = message }, }
async和await
什么是async和await
async 定义异步函数
自动把函数转换为promise
当调用异步函数时,函数返回值会被resolve处理
异步函数内部可以使用await
await 暂停异步函数的执行
当使用在promise 前面是,await等待promise完成,并返回promise的结果
await只能和promise一起使用,不能和callback一起使用
await只能和async函数中使用,【async和await两者必须搭配使用】
async 和 await 的使用场景:
解决了 promise 中的点 then 链
我们原始的写法
/**
* 传入参数 n,表示这个函数执行的时间(毫秒)
* 执行的结果是 n + 200,这个值将用于下一步骤
*/
function takeLongTime(n) {
return new Promise(resolve => {
setTimeout(() => resolve(n + 200), n);
});
}
function step1(n) {
console.log(`step1 with ${n}`);
return takeLongTime(n);
}
function step2(n) {
console.log(`step2 with ${n}`);
return takeLongTime(n);
}
function step3(n) {
console.log(`step3 with ${n}`);
return takeLongTime(n);
}
现在我们使用promise来实现
function doIt() {
console.time("doIt");
const time1 = 300;
step1(time1)
.then(time2 => step2(time2))
.then(time3 => step3(time3))
.then(result => {
console.log(`result is ${result}`);
console.timeEnd("doIt");
});
}
doIt();
现在使用async和await来实现
async function doIt() {
console.time("doIt");
const time1 = 300;
const time2 = await step1(time1);
const time3 = await step2(time2);
const result = await step3(time3);
console.log(`result is ${result}`);
console.timeEnd("doIt");
}
doIt();
小结:
使用 async / await, 搭配 promise, 可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性。
Async Await 的优点:
1、解决了回调地狱的问题
2、支持并发执行
3、可以添加返回值 return xxx;
4、可以在代码中添加try/catch捕获错误
async和await与promise的关系?
不存在谁替代谁,因为async和await是寄生与promise和Generator的语法糖
async和await在干什么,async用于申明一个function是异步的,而await可以认为是async wait的简写,等待一个异步方法执行完成。