小程序单独封装axios请求

一.前言

1.小程序自己有单独的请求api,并且小程序自己已经处理了跨域。

wx.request({
  url: 'test.php', //仅为示例,并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值=》请求他
  },
  success (res) {
    console.log(res.data)
  }
})

但每次都这样请求不免麻烦,重复,所以我们自己封装一下。封装成axios请求

二.封装请求Api

class Axios {
  post(url, data, formType) {
    return this.request("POST", url, data, formType)
  }
  get(url, data, formType) {
    return this.request("GET", url, data, formType)
  }
  put(url, data, formType) {
    return this.request("PUT", url, data, formType)
  }
  update(url, data, formType) {
    return this.request("UPDATE", url, data, formType)
  }
  detete(url, data, formType) {
    return this.request("DELETE", url, data, formType)
  }
  request(method, url, data, formType) {
    return new Promise((resolve, reject) => {
      var comtentType = formType ? 'application/x-www-form-urlencoded' : 'application/json'
      wx.request({
        url: "https://cp-app.cme-im.com/expo-server"+url,
        method:method,
        data:data,
        header: {
          "content-type": comtentType
        },
        success(res) {
          resolve(res.data)
        },
        fail(err) {
          reject(err)
        }
      })
    })
  }
}
module.exports = new Axios()

三.在项目中使用

1.新建一个当前页面请求的js文件,
2.引入自定义的axios方法

const axios=require("../utils/util")//引入axios
module.exports={//将请求暴露出去
  //获取首页轮播
  getBanner(url,data){
    return axios.post(url,{data:data},1)
  },
  //创建订单接口
  addSaveForJson(url,data){
    return axios.post(url,data,0)
  }
}

3.在想要使用的界面的js中引入这两个暴露的请求

const {getBanner,addSaveForJson} =require("../../api/loginApi")

4.解决异步

  addOrder:async function(){
    let date=new Date().getTime();
    
    let result=await addSaveForJson("/system/prod/addSaveForJson",{
      "orderType":this.data.swiperIdx,
      "signature":this.data.inputValue,
      "storeType":this.data.radio,
      "createBy":date.toString()//传递时间的转换
  })
   if(result.code == 200){
    wx.setStorageSync('orderDate', date.toString())//存入本地
    wx.switchTab({//跳转tab
      url: '/pages/Order/index'
    })
   }else{
   console.log("请求失败!")
   }
  },

猜你喜欢

转载自blog.csdn.net/YaoQing222/article/details/108481977
今日推荐