成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

讓小程序支持async-await

taoszu / 2989人閱讀

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

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默認(rèn)攜帶token
  let header = params.header || {
    "Content-Type": "application/json",
    "token": params.token || ""
  }
  let data = params.data || {}
  let method = params.method || "GET"
  // hideLoading可以控制是否顯示加載狀態(tài)
  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()
    // 請求已經(jīng)結(jié)束 做其他事
  },
  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
      })
    })
  }
})

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

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

效果圖如下

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

示例WXML：

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

示例JS

Page({
  data: {
    imgList:[]
  },
  onSub: async function() {
    // 點(diǎn)擊提交后，開始上傳圖片
     let imgUrls = []
     for (let index = 0; index < this.data.imgList.length; index++) {
       await this.uploadFile(this.data.imgList[index]).then((res) => {
         // 這里要注意把res.data parse一下，默認(rèn)是字符串
         let parseData = JSON.parse(res.data)
         imgUrls.push(parseData.data) // 圖片地址
       })
     }
     console.log(imgUrls) // 3張圖片上傳成功后，執(zhí)行其他操作
  },
  // 刪除某張圖片
  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) => {
        // 存儲臨時(shí)地址
        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()是異步執(zhí)行的，但是有了async-await的支持，輕松搞定異步等待的問題

更多開發(fā)總結(jié)移步于此

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96274.html

相關(guān)文章

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

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

    miqt 評論0 收藏0

  • JVM并發(fā)編程模型覽

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

    cppowboy 評論0 收藏0

  • JVM并發(fā)編程模型覽

    摘要：本文介紹和點(diǎn)評上的等并發(fā)編程模型。異步更適合并發(fā)編程。同步使線程阻塞，導(dǎo)致等待。基本模型這是最簡單的模型，創(chuàng)建線程來執(zhí)行一個任務(wù)，完畢后銷毀線程。響應(yīng)式編程是一種面向數(shù)據(jù)流和變化傳播的編程模式。起源于電信領(lǐng)域的的編程模型。 本文介紹和點(diǎn)評JVM上的Thread, Thread Pool, Future, Rx, async-await, Fiber, Actor等并發(fā)編程模型。本人經(jīng)驗(yàn)...

    wudengzan 評論0 收藏0

  • 記一次小程序開發(fā)中如何使用async-await并封裝公共異步請求

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

    why_rookie 評論0 收藏0

  • 小程序開發(fā)技巧總結(jié)

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

    Wuv1Up 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<