美文网首页
微信小程序http请求封装

微信小程序http请求封装

作者: 简约酒馆 | 来源:发表于2020-01-29 13:47 被阅读0次

微信小程序中request请求都是异步请求的,封装的http请求 使用promise请求将异步请求变成同步化,保存异步操作的数据,解决地狱回调的async和await是Es7新增的语法在小程序无法使用,小程序只支持Es5和Es6


 const Http=function () {
    this.baseUrl="https://api.it120.cc/XXXX"    //默认地址前缀
 };
Http.prototype.fetch=function (url, method, params = {}) {
    url = this.baseUrl + url;     //拼接请求路径
    let header= {'content-type': 'application/json'}    // 默认值
    wx.showLoading({          //显示 loading 提示框
        title: '加载中',
        mask: true
    })
    return new Promise((resolve,reject)=>{
        wx.request({
            url: url, //请求地址
            data: params,
            method:method,
            header,
            success (res) {
                if(res.statusCode==200){    //获取成功的数据
                    wx.hideLoading()
                    resolve(res.data.data||res.data)
                }
            },
            fail(err){            //获取失败的数据
                wx.hideLoading();  // 隐藏 loading 提示框
                // * 弹窗提示网络错误
                // */
                wx.showToast({
                    title: '加载失败',
                    icon: 'none',
                    duration: 2000,
                    mask: true
                })
                reject(err)
            }
        })
    })
}
Http.prototype.get=function (url,params) {
    return this.fetch(url,'get',params)
};
Http.prototype.post=function (url,params) {
    return this.fetch(url,'post',params)
};


export default new Http


在需要使用请求的文件中引入的两种方式

// import Http from "./utils/http";       ////引入 封装的http请求文件
const http = require('/utils/http.js')  //引入创建的http.js文件

相关文章

网友评论

      本文标题:微信小程序http请求封装

      本文链接:https://www.haomeiwen.com/subject/xmbvthtx.html