微信请求api二次封装

今天给新手分享一个简单的小程序的请求封装方法,因为咋小程序中,可能每次请求数据去掉wx.request的方法,下面呢尽量使得模块化和工程化一些,首先在utils的文件夹下面新建一个request.js.的文件夹,

const app = getApp();
const baseUrl =app.globalData.baseurl;
/**
 * 
 * @param { url , method , header , responsetype } options 
 * url:是baseurl+参数中的url
 * method:传递方式
 * data:传递的数据
 * header:是啥格式,这里可能是json,也可能是约定的一些格式
 * responseType:可能是业务需要的二进制流数据
 */
const Request=(options)=>{

    return new Promise((resolve,reject)=>{
        wx.request({
          url: baseUrl+options.url||'',
          method:options.method||"GET",
          data:options.data||{},
          header:`{${options.header}||""}`,
          responseType:options.type||"",
          success:(res)=>{
            resolve(res.data)
          },
          fail:(err)=>{
            reject(err);
          }
        })
    })
}
module.exports={
    Request
}

然后在utils的文件夹下面新建一个api的js进行对接口的封装,然后传到需要调用接口的页面,如下

const request = require("../utils/request")
/**
 * 参数中url可以是get请求的参数等,
 * data是需要传递的参数多为post
 */
const API = {
    //获取数据
    getData(url, data) {
        return request.Request({
            url: ` ${url}`,
            method: "",
            
        })
    }

}
module.exports = {
    API
}

这样都可以封装好了,然后在需要组件调用的页面进行引入调用,

const  HTTP =require("../../utils/api") 

 HTTP.API.getData().then(res=>{
        console.log(res)
      })   

这样就可以在浏览器的network中可以看到请求的数据返回值了,

以上就是对小程序的请求进行二次封装的方法,以供参考.