小程序wx.request请求的简单封装

1、api.js

const baseUrl = ‘https://api.it120.cc‘;

const http = ({ url = ‘‘, param = {}, ...other } = {}) => {
    wx.showLoading({
        title: ‘请求中,请耐心等待..‘
    });
    let timeStart = Date.now();
    return new Promise((resolve, reject) => {
        wx.request({
            url: getUrl(url),
            data: param,
            header: {
                ‘content-type‘: ‘application/json‘ // 默认值 ,另一种是 "content-type": "application/x-www-form-urlencoded"
            },
            ...other,
            complete: (res) => {
                wx.hideLoading();
                console.log(`耗时${Date.now() - timeStart}`);
                if (res.statusCode >= 200 && res.statusCode < 300) {
                    resolve(res.data)
                } else {
                    reject(res)
                }
            }
        })
    })
}

const getUrl = (url) => {
    if (url.indexOf(‘://‘) == -1) {
        url = baseUrl + url;
    }
    return url
}

// get方法
const _get = (url, param = {}) => {
    return http({
        url,
        param
    })
}

const _post = (url, param = {}) => {
    return http({
        url,
        param,
        method: ‘post‘
    })
}

const _put = (url, param = {}) => {
    return http({
        url,
        param,
        method: ‘put‘
    })
}

const _delete = (url, param = {}) => {
    return http({
        url,
        param,
        method: ‘put‘
    })
}
module.exports = {
    baseUrl,
    _get,
    _post,
    _put,
    _delete
}

2、页面调用

const api = require(‘../../utils/api.js‘)

// 单个请求
api.get(‘list‘).then(res => {
 console.log(res)
}).catch(e => {
 console.log(e)
})

// 一个页面多个请求
Promise.all([
 api.get(‘list‘),
 api.get(`detail/${id}`)
]).then(result => {
 console.log(result)
}).catch(e => {
 console.log(e)
})

原文地址:https://www.cnblogs.com/congfeicong/p/11235046.html

时间: 2024-08-01 07:42:53

小程序wx.request请求的简单封装的相关文章

监控微信小程序wx.request请求失败

在微信小程序里,与后台服务器交互的主要接口函数是wx.request(),用于发起 HTTPS 网络请求.其重要性不言而喻.然而,却经常遇到请求失败的问题,笔者特意谷歌"wx.request 请求失败",可以搜索到很多相关的文章,下面列出一些: wx.request 失败| 微信开放社区 微信小程序 wx.request 请求失败- SegmentFault 思否 小程序部分机型小程序用户无法发起 wx.request 请求,网络错误问题 ... wx.request()失败,requ

微信小程序wx.request接口

微信小程序wx.request接口 wx.request是小程序客户端与服务器端交互的接口 HTTPS 请求 一个微信小程序,只能同时(同时不能大于5个)有5个网络请求 wx.request(OBJECT) 发起网络请求 url data header method dataType wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, header: { 'content-type': 'applicat

微信小程序wx.request组件的那些坑

最近在做一个教育的在线发布系统,打算用微信小程序做前端,后端用php的CI框架,这两天把CI框架的基本功能已经啃完,因为手册比较完善,所以按照逻辑走一边就通了. 反观微信小程序,帮助代码不多,对于一些没接触过前端和js开发的新手来说,很多流程和细节都会拿不准. 1.这两天遇到最大的困扰就是wx.request组件如何从php服务器端取回数据并显示在小程序界面上,这里涉及到一个通信, 因为小程序目前的机构和框架都是基于ajax异步交互的基础上的,所以要懂得小程序的数据读写功能,首先要了解ajax的

微信小程序 wx.request

一:问题 微信小程序 post请求时,服务器后台接受不到data里面的数据的bug. 二:解决办法 wx.request({ url: 'http://xxxxxxxxx/Create', method: 'POST', data: { "userid": userid, "way": way, "specificWay": specificWay, "money": money, "dateTime":

微信小程序wx.request的回调使用

微信小程序调用外部js中的wx.request方法时,因为异步的请求机制,我们不能在其success:function()中直接返回需要的数据. 例子: 一: //此方法处于外部文件 “utils/util.js” 中进行了定义 function request_method(url, callback) { wx.request({ url: url, method: 'GET', header: { 'Content-Type': 'application/json' }, success:

【微信小程序】request请求POST提交数据,记得要加上header

wx.request({ url: '*******', data: { "type":"nearest_village", "district": that.data.district, }, header: { "Content-Type": "application/x-www-form-urlencoded" }, method: 'POST', success: function(res) { /

小程序发送request请求,提示不在合法域名列表中的解决方法

参考网址:https://blog.csdn.net/debruyne/article/details/78046831 方法一:在小程序中设置不校验合法域名 方法二: 管理员将要使用的域名添加到小程序后台 设置 --> 服务器域名配置 原文地址:https://www.cnblogs.com/slovey/p/9288613.html

《微信小程序》, request 请求数据

wx.request({ url: "路径", method: 'post', header: { "Content-Type": "application/x-www-form-urlencoded" }, data: { }, success: function (res) { console.log(res) } }) 点击详情,本地设置,选择不校验合法域名 把这个勾选. 原文地址:https://www.cnblogs.com/yetie

微信小程序 wx.request POST请求------中文乱码问题

问题: 一个简单的表单,提交后台返回数据"提交成功". 以为没问题了,但是没过多久后台小哥就问为啥那么多乱码,找了很久原因,发现在提交的时候就已经乱码了. 嗯,前端问题,然后测试GET/POST方法.GET没有乱码,POST乱码 header这样写的    header: { 'content-type': 'application/x-www-form-urlencoded' } 原因: 如果设置content-type: application/x-www-form-urlenco