微信小程序网络请求封装以及上传带图的表单

一般网络请求函数封装

注意：res.data的判断以及操作需要按照实际后端返回结果作为依据

export function httpRequest(url, params , successCode, method = "get") { //method不传参数默认为get请求
  return new Promise((resolve, reject) => {
    wx.request({
      url: url,
      data: params, //params注意封装为对象
      method: method,
      header:{
      'content-type':'application/x-www-form-urlencoded'
      },
      success: res => { //此处res为小程序封装的result对象，里面的result为后端返回的实际内容
        if(!res.data.data){ //请求成功且为后端的successResult，但是data数据为null或false
          wx.showToast({
            title: res.data.message, //返回的message，内容为原因
            icon:"error"
          })
        }
        if (res.data.code === successCode) { //请求成功
          resolve(res.data.data) //请求完成的具体数据
        } else {  //请求成功但是为后端的failResult，内容一般也是null或false
          wx.showModal({
            cancelColor: 'cancelColor',
            title:"失败",
            content:"请求出错或请求无数据"
          })
          
        }
      },
      fail: err => {
        reject("网络请求失败")
      }
    })
  })
};

小程序里图片随表单上传需要使用wx.uploadFile

export function submit(that) { //因为这个函数需要被引用，that参数为具体页面的this，下方的that.data就是某个页面的this.data
const data = { //表单数据
      title: that.data.blogTitle, //表单数据
      content: that.data.blogContent, //表单数据
    }
    wx.showLoading({ //加载框
      title: '请求中',
      mask: true
    })
 	wx.uploadFile({
        filePath: that.data.blogImg, //存储的文件路径，小程序上传图片到选框后返回的临时路径
        name: 'file', //后端接受的图片的参数名称
        url: 'http://localhost:80/insertBlog', //后端接口，开发环境勾选不校验https选项
        formData: data, //其他表单参数，data封装为对象
        success: res => {
          // console.log("上传成功",res)
          wx.hideLoading({ //隐藏加载框
          }).then(res => {
            wx.showToast({ //提示框
              title: '上传成功',
            }).then(res => { 
              that.setData({
                blogTitle: "", //清除文本内容
                blogContent: ""
              })
            })
          })
        },
        fail: res => {
          wx.hideLoading({ //隐藏加载框
          }).then(res => {
            wx.showModal({
              title: '请求失败',
              content: "请检查本地网络"
            })
          })
        }
      })
      }