技術標籤：uniapp 小程式小程式

為什麼要封裝？

• 原生的請求不支援Promise，只能使用 .then() 的方式；
• uni-app 的請求不能方便的新增 “請求中” 的效果，也就是等待中。。。的特效；
• uni-app 的請求值是個陣列，不方便；

封裝思路

• 基於原生Promise 封裝；
• 掛載到Vue 原型上；
• 通過 this.request 的方式來請求；

1，在和pages同級目錄下新建 utils 資料夾，新建request.js檔案，在檔案中封裝Promise

export default (params)=>{
    // 載入中
    uni.showLoading({
        title:
 
'載入中'
    })
    return new Promise((resolve, reject)=>{
        wx.request({
            // 此處簡寫url,data等，只接受一個形參 params
            ...params,
            success(res){
            	// 如果成功 則返回一個數據，在this.request().then(res=>{})的then中接受
                resolve(res.data)
            },
            fail
 
(err){
                reject(err)
            },
            // complete方法是無論成功還是失敗最後都要執行的
            complete(){
                // 關閉載入中的特效
                uni.hideLoading()
            }

        })
    })
}

2，在main.js 中引入封裝好的 Promise，並把它掛載到Vue上

import request from './utils/request'
Vue.prototype.request =
 
 request

3，之後便可以在應的頁面中去使用，例如需要在頁面載入的時候請求,，後面的 .then執行Promise的鏈式呼叫

onLoad(){
      this.request({
          url:"https://www.runoob.com/try/ajax/json_demo.json"
      }).then(res=> {  
          console.log(res)
      }).catch(err=>{
          console.log(err)
      })
  },