1. 前言

1. 之前 2 篇文章整理的有点多async/await基础
   promise基础概念
   promise基础用法
2. 所以这个把应用在单独抽出来,因为我们要知道 什么场景下 可以使用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)
                            }
                        }
                    }
                })
            }

2. 页面使用

            //  点击事件 发送 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. 小程序 请求封装

1. 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()
      }
    })
  })
}

---

2. 回调函数封装

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. 多异步任务并发执行解决方案

1. 以 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基础用法

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉