小程序 api接口封装

• 

  基于Promise封装wx.request

  新建一个http.js代码如下：

  
    const Config = {
      api_base_url:'https://www.xxxxx.com/', //填写你的服务器api地址 
      version:1 //版本
    }
    class HTTP {
      request({ url, data = {}, method = 'POST'}) {
        return new Promise((resolve, reject) => {
          this._request(url, resolve, reject, data, method)
        })
      }
      _request(url, resolve, reject, data = {}, method = 'POST') {
        const role_type = wx.getStorageSync('roleType')
        const baseParam = { //基本参数
          version: Config.version,
          token: wx.getStorageSync('token')
        }
        let data1 = Object.assign(baseParam, data)
        wx.request({
          url: Config.api_base_url + url,
          method: method,
          data: data1,
          header: {
            'content-type': 'application/x-www-form-urlencoded'
          },success: (res) => {
            //320 未登录跳转登录页
            if (res.data.code == 320) {
                setTimeout(() => {
                  wx.navigateTo({
                    url: '/pages/login/login'
                  })
                }, 300);
                return false;
            }
            if (res.data.success) {
              resolve(res.data.data)
            }else{
              reject(res)
              this._show_error(res.data.msg || '返回错误！')
            }
    
          },fail: (res) => {
            reject(res.data.msg)
            this._show_error('服务器繁忙')
          },
          complete:(res)=>{
            
          }
        })
      }
    
      //封装提示语
      _show_error(msg) { 
        wx.showToast({
          title: msg,
          icon: 'none',
          duration: 3000
        })
      }
    }
    export {
      HTTP
    }
  
  

• 

  页面上使用接口

  代码示例如下：

  //index.js
  import {
    HTTP
  }
  from "../../utils/http.js"
  const http = new HTTP();
  
  Page({
      /**
        * 页面的初始数据
        */
      data: {
        goodsList:[]
      },
  
      /**
      * 生命周期函数--监听页面加载
      */
      onLoad: function (options) {
        this.getData()
      },
  
      getData() {
        http.request({
          url: 'goods/get_goods_info', //填写自己的服务器接口
          data:{
            page:1,
            size:10
          }  //传自己所需的参数
        }).then(res => {
          this.setData({
            goodsList: res
          })
        })
      }
  
  })
  
  
  
  

• 

  上传图片接口封装

  封装 wx.uploadFile 代码示例如下：

   //uploadimg.js 上传图片的封装，可上传多张
  const uploadImg = (data)=>{
    return new Promise((resolve, reject) => {
      _uploadimg(data, resolve, reject)
    })
  }
  _uploadimg(data, resolve, reject) {
    let that = this,
    i = data.i ? data.i : 0,
    success = data.success ? data.success : 0,
    fail = data.fail ? data.fail : 0;
    wx.uploadFile({
      url: api_base_url + data.url,
      filePath: data.path[i],
      name: 'img_url',  //对应后台name
      formData: {
        token: wx.getStorageSync("token")
      },
      success: function (res) {
        success++;
        let data = JSON.parse(res.data)
        if (data.success) {
          resolve(res.data.data)
        }
        else {
          reject(data.msg)
          console.log(i);
      },
      fail: function (res) {
        fail++;
        console.log('fail:' + i + "fail:" + fail);
      },
      complete: () => {
        console.log(i);
        i++;  //这个图片执行完上传后，开始上传下一张            
        if (i == data.path.length) {   //当图片传完时，停止调用          
          console.log('成功：' + success + " 失败：" + fail);
        } else {  //若图片还没有传完，则继续调用函数                
          data.i = i;
          data.success = success;
          data.fail = fail;
          that.uploadimg(data);
        }
      }
    })
  }
  export { uploadImg }
  
  

  页面上调用代码示例如下：

  //wxml code
  <view class="title">上传门店主图</view>
  <view bindtap="chooseImage">上传图片</view>
  
  

  //js code
  import {
    uploadImg
  } from "uploadimg.js"
  Page({
    //点击上传的按钮事件
    chooseImage(e){
        wx.chooseImage({
            count: 1,
            sizeType: ['original', 'compressed'],
            sourceType: ['album', 'camera'],
            success (res) {
                // tempFilePath可以作为img标签的src属性显示图片
                const tempFilePaths = res.tempFilePaths
                //调整封装好的uploadImg
                uploadImg({
                  url:'store/edit_store_img',
                  path: tempFilePaths
                })
            }
        }) 
    }
    
  })