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()
参考资料
async/await基础
promise基础
promise基础用法