微信请求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中可以看到请求的数据返回值了,

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！