1. 前言
- 之前 2 篇文章整理的有点多async/await基础
promise基础概念
promise基础用法- 所以这个把应用在单独抽出来,因为我们要知道 什么场景下 可以使用
promise
2. 原生 ajax 封装
// promise ajax封装 function ajax(method, url, data) { var request = new XMLHttpRequest() request.open(method, url) request.send(data) return new Promise((resolve, reject) => { // 未来某个时间调用,但具体的啥时候调用不清楚 // 所以我们用 promise 包裹起来 ,异步代码 同步的写法 request.onreadystatechange = function() { if (request.readyState === 4) { if (request.status === 200) { // 请求成功的操作 转为 JSON 对象 resolve(JSON.parse(request.responseText)) } else { // 请求失败的操作 reject(request.status) } } } }) }
- 页面使用
// 点击事件 发送 get请求 let sendBtn = async () => { // 从用户 从使用者的角度去封装 异步代码 同步的写法 ajax("GET", "./路径").then(res => { console.log("成功:", res); }).catch(error => { console.log("失败:", error); }) //******************************async/await try { let res = await ajax("GET", "./路径") console.log("成功:", res); } catch (e) { console.log("失败:", e); } }
3. 小程序 请求封装
- promise 封装
const getApi = (url, data) => { wx.showLoading({ title: '加载中', mask: true }) // Promise 承诺:处理异步回调 同意 拒绝 return new Promise(function (resolve, reject) { // 只能走一个 要么同意 要么拒绝 // resolve() 回调then() // reject() 回调catch() wx.request({ url: baseUrl + url, data, header: { 'content-type': 'application/json' // 默认值 }, success: (res) => { resolve(res.data) }, fail: () => { wx.showToast({ title: '服务器错误', icon: 'error', duration: 2000 }) reject("服务器错误,请稍后重试"); }, complete(res) { // console.log("complete",res); wx.hideLoading() // wx.stopPullDownRefresh() } }) }) }
- 回调函数封装
function getApi(url, data, successCB) { wx.showLoading({ title: '加载中', }) wx.request({ url: baseUrl + url, data, header: { 'content-type': 'application/json' // 默认值 }, success: (res) => { if (res.code = 200) { // 回调到组件 ,数据给他 successCB && successCB(res.data) } else { wx.showToast({ title: '服务器错误', icon: 'error', duration: 2000 }) } }, fail: (err) => { wx.showToast({ title: '服务器错误', icon: 'error', duration: 2000 }) console.log("错误信息:", err); }, complete(res) { // console.log("complete",res); wx.hideLoading() // wx.stopPullDownRefresh() } }) }
4. 多异步任务并发执行解决方案
- 以
nodejs后端为例
// 异步函数用法举例: var fs = require("fs") var p1 = new Promise(function(resolve){ fs.readFile("./data/a.txt",function(err,data){ resolve(data) }) }) var p2 = new Promise(function(resolve){ fs.readFile("./data/b.txt",function(err,data){ resolve(data) }) }) var p3 = new Promise(function(resolve){ fs.readFile("./data/c.txt",function(err,data){ resolve(data) }) }) var p4 = new Promise(function(resolve){ fs.readFile("./data/d.txt",function(err,data){ resolve(data) }) }) // 多异步任务并发执行方案一: promise合并 var allP = Promise.all([p1,p2,p3,p4]) allP.then(function(res){ console.log(res.join("")) }) // 多异步任务并发执行方案二: 异步函数 async function getData(){ var data1 = await p1; var data2 = await p2; var data3 = await p3; var data4 = await p4; console.log(data1 + data2 + data3 + data4) } getData()
