讓小程序支持async-await

taoszu 發布于2019-08-22 18:50 / 2978人閱讀

摘要：是的語法，截止我寫這篇文章為止，小程序還是不支持語法的，所以需要使用這個庫下載，并把文件夾放到目錄下在引入封裝，讓微信的支持語法所有的請求，默認攜帶可以控制是否顯示加載狀態加載中封裝好后就可以在文件中使用了，使用方法如下請

async-await是ES7的語法，截止我寫這篇文章為止，小程序還是不支持async-await語法的，所以需要使用regenerator這個庫

下載regenerator，并把regenerator-runtime文件夾放到utils目錄下

在util.js引入import regeneratorRuntime from "./regenerator-runtime/runtime-module"

封裝wxRequest，讓微信的wx.request API支持async-await語法

const wxRequest = async (url, params = {}) => {
  Object.assign(params, {
    token: wx.getStorageSync("token")
  })
  // 所有的請求，header默認攜帶token
  let header = params.header || {
    "Content-Type": "application/json",
    "token": params.token || ""
  }
  let data = params.data || {}
  let method = params.method || "GET"
  // hideLoading可以控制是否顯示加載狀態
  if (!params.hideLoading) {
   wx.showLoading({
     title: "加載中...",
   })
  }
  let res = await new Promise((resolve, reject) => {
    wx.request({
      url: url,
      method: method,
      data: data,
      header: header,
      success: (res) => {
        if (res && res.statusCode == 200) {
          resolve(res.data)
        } else {
          reject(res)
        }
      },
      fail: (err) => {
        reject(err)
      },
      complete: (e) => {
        wx.hideLoading()
      }
    })
  })
  return res
}

export {
  wxRequest
}

封裝好后就可以在js文件中使用了，使用方法如下：

import regeneratorRuntime from "../../utils/regenerator-runtime/runtime-module.js"
import {
  wxRequest
} from "../../utils/util.js"

Page({
  data: {
   list:[],
   count: 0,
   page: 1,
   limit: 10
  },
  onLoad: function() {
    this.getList()
    // 請求已經結束 做其他事
  },
  getList: async function() {
    await wxRequest(app.globalData.baseUrl + "/test",{
      hideLoading: true,
      data: {
        limit: this.data.limit,
        page: this.data.page
      }
    }).then((ret) => {
      this.setData({
        list: ret.data.data,
        count: ret.data.num
      })
    })
  }
})

封裝帶來的最大的好處是擴展方便，支持了async/await語法后，任何異步操作API都可以像同步一樣執行，比如說多圖上傳，圖片都上傳成功后后端會返回新的圖片地址，現在可以這么做：

任務：小程序上傳圖片到服務器，最多上傳三張，前端可以刪除圖片

效果圖如下

使用到的API有兩個：wx.uploadFile wx.chooseImage

示例WXML：

imgList是wx.chooseImage成功后返回的圖片臨時地址

示例JS

Page({
  data: {
    imgList:[]
  },
  onSub: async function() {
    // 點擊提交后，開始上傳圖片
     let imgUrls = []
     for (let index = 0; index < this.data.imgList.length; index++) {
       await this.uploadFile(this.data.imgList[index]).then((res) => {
         // 這里要注意把res.data parse一下，默認是字符串
         let parseData = JSON.parse(res.data)
         imgUrls.push(parseData.data) // 圖片地址
       })
     }
     console.log(imgUrls) // 3張圖片上傳成功后，執行其他操作
  },
  // 刪除某張圖片
  clearImg: function (params) {
    let imgList = this.data.imgList
    let id = params.currentTarget.dataset.id // 圖片索引
    imgList.splice(id, 1) // 刪除
    this.setData({
      imgList: imgList
    })
  },
  chooseImage: function (params) {
    wx.chooseImage({
      count: 3, // 做多3張
      sizeType: ["original", "compressed"],
      sourceType: ["album", "camera"],
      success: (res) => {
        // 存儲臨時地址
        this.setData({
          imgList: res.tempFilePaths
        })
      }
    })
  },
  uploadFile: function (filePath) {
    // 返回Promise是為了解決圖片上傳的異步問題
    return new Promise( (resolve, reject) => {
      wx.uploadFile({
        url: app.globalData.baseUrl + "/file/upload", // 上傳地址
        filePath: filePath,
        name: "file", // 這里的具體值，問后端人員
        formData: {},
        header: {
          "Content-Type": "multipart/form-data"
        },
        success: (res) =>{
          resolve(res.data)
        },
        fail:(err) => {
          reject(err)
        }
      })
    })
  }
})

wx.uploadFile()是異步執行的，但是有了async-await的支持，輕松搞定異步等待的問題

更多開發總結移步于此

云服務器 GPU云服務器 async-await 小程序webrtc支持小程序支持webrtc 小程序支持webrtc嗎

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96274.html

ES6系列文章異步神器async-await

摘要：有兩個陌生的關鍵字，同時函數執行結果似乎返回了一個對象。用來表示函數是異步的，定義的函數會返回一個對象，可以使用方法添加回調函數。如果的是對象會造成異步函數停止執行并且等待的解決如果等的是正常的表達式則立即執行。視頻講解關于異步處理，ES5的回調使我們陷入地獄，ES6的Promise使我們脫離魔障，終于、ES7的async-await帶我們走向光明。今天就來學習一下 async-a...

miqt 2019-08-21 17:00 評論0 收藏0
JVM并發編程模型覽

摘要：本文介紹和點評上的等并發編程模型。異步更適合并發編程。同步使線程阻塞，導致等待?；灸Ｐ瓦@是最簡單的模型，創建線程來執行一個任務，完畢后銷毀線程。響應式編程是一種面向數據流和變化傳播的編程模式。起源于電信領域的的編程模型。本文介紹和點評JVM上的Thread, Thread Pool, Future, Rx, async-await, Fiber, Actor等并發編程模型。本人經驗...

cppowboy 2019-06-24 17:51 評論0 收藏0
JVM并發編程模型覽

摘要：本文介紹和點評上的等并發編程模型。異步更適合并發編程。同步使線程阻塞，導致等待?；灸Ｐ瓦@是最簡單的模型，創建線程來執行一個任務，完畢后銷毀線程。響應式編程是一種面向數據流和變化傳播的編程模式。起源于電信領域的的編程模型。本文介紹和點評JVM上的Thread, Thread Pool, Future, Rx, async-await, Fiber, Actor等并發編程模型。本人經驗...

wudengzan 2019-08-14 16:49 評論0 收藏0
記一次小程序開發中如何使用async-await并封裝公共異步請求

摘要：實現方案首先小程序目前還是不支持的和的，那么如何讓它支持呢點擊下載，并把下載好的文件夾放到自己小程序的目錄下，包總共才多，體積很小的。如果想使用這些新的對象和方法，必須使用，為當前環境提供一個墊片。用于實現瀏覽器并不支持的原生的代碼。前言在平常的項目開發中肯定會遇到同步異步執行的問題，還有的就是當執行某一個操作依賴上一個執行所返回的結果，那么這個時候你會如何解決這個問題呢； 1.是...

why_rookie 2019-08-23 14:49 評論0 收藏0
小程序開發技巧總結

摘要：前言最近公司要開發一款電商小程序，匆忙看了一遍文檔就開始干活了。整體開發體驗個人感覺不太好，特別是如果之前習慣了開發，突然去開發小程序，感覺很雞肋。前言最近公司要開發一款電商小程序，匆忙看了一遍文檔就開始干活了。整體開發體驗個人感覺不太好，特別是如果之前習慣了Vue開發，突然去開發小程序，感覺很雞肋。以下是我在開發中遇到的一些問題以及解決方法的總結，僅供參考引入iconfont ...

Wuv1Up 2019-08-22 18:48 評論0 收藏0