wx.request 微信小程序請求上傳封裝

image.png

utils下新建文件wx-prototype.js：

const host = 'https://***'
const alert = title =>{
  wx.showToast({
    title: title,
    icon: 'none'
  })
}
const getRequestOptions = options => {
  const url = host + options.url
  const header = {
    api_token: wx.getStorageSync('api_token'),
    "Content-Type": "application/json"
  }
  options.url = host + options.url
//loading 傳false表示不展現(xiàn)請求彈窗，傳文字展示所傳文字，不傳展示默認
  options.loading === false ? null : typeof options.loading === 'string' ? wx.showLoading({
    title: loading,
  }): wx.showLoading({
      title: '請稍后...',
    })
  return Object.assign(options, { url, header });
}


const get = options => {
  options.method = 'get'
  return new Promise((resolve, reject)=>{
    request(getRequestOptions(options), resolve, reject)
  })
}

const post = options => {
  options.method = 'post'
  return new Promise((resolve, reject)=>{
    request(getRequestOptions(options), resolve, reject)
  })
}

const request = (options, resolve, reject) => {
  options.data = options.data || {}
  //后端同學非要把token放請求參數(shù)里面，沒得辦法??
  options.data.api_token = wx.getStorageSync('api_token'),
    wx.request({
      ...options,
      success: (res) => {
        wx.hideLoading()
        wx.stopPullDownRefresh()
        const data = res.data
        if (data.status == 1) {
          wx.setStorageSync('isLoginPage', false)
          resolve(data)
        } else if (data.status == 400) {
          wx.setStorageSync('isLoginPage', false)
          alert('數(shù)據(jù)不存在')
        } else if (data.status == 401) {
          alert('沒有權限')
          const isLoginPage = wx.getStorageSync('isLoginPage')
          if (isLoginPage) return;
          setTimeout(_ => {
            //防止一個頁面有兩個請求時，跳轉兩次登錄頁
            wx.setStorageSync('isLoginPage', true)
            wx.redirectTo({
              url: '/pages/login/login',
            })
            wx.setStorageSync('isLoginPage', false)
          }, 2000)
        } else {
          alert(data.message || '請求錯誤')
        }
      },
      fail: (error) => {
        wx.hideLoading()
        wx.stopPullDownRefresh()
        alert(JSON.stringify(error))
        reject(error)
      }
    })
}

// 這里比較懶，直接掛到wx上了
wx.$get = get
wx.$post = post
wx.$upload = upload

wx.$alert = alert

app.js里面：

image.png

使用方法：

Page({
  data: {
      data: {
      list: [],
      page: 1,
     total: 0
   },
  onLoad: function (options) {
    this.getData()
  },
  getData() {
    wx.$get({
      url: '/list',
      data: {
        group: 'system',
        page: this.data.page
      }
    }).then(res => {
      const data = res.data
      const list = this.data.list
      list.push(...data.data)
      this.setData({
        list: list
      })
    })
  },
  onReachBottom() {
     this.data.page += 1
     this.getData()
  }
},

下一篇，微信小程序上傳至騰訊云：http://www.itdecent.cn/p/168aed3265ab