小程序封装wx.request,以及调用
1、新建一个api目录,与pages同级
2、在api目录下新建一个api.js文件
3、编写代码
const host = 'http://test.test.cn'
const wxRequest = function (params, url) {
wx.showToast({
title: '加载中...',
icon: 'loading'
})
wx.request({
url: url,
method: params.method || 'GET',
data: params.data || {},
header: {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
},
success: function (res) {
params.success && params.success(res)
wx.hideToast()
},
fail: function (res) {
params.fail && params.fail(res)
},
complete: function (res) {
params.complete && params.complete(res)
}
})
} const bindCode = function (params) { wxRequest(params, host + '/AppPhone/Api') }
const startScan = function (params) { wxRequest(params, host + '/AppPhone/Api') }
const imgToservers = function (params) { wxRequest(params, host + '/AppPhone/Api/upload_files') } module.exports = {
bindCode,
startScan,
imgToservers
}
4、在js中调用
import api from '../../api/api.js'
Page({ /**
* 页面的初始数据
*/
data: {
shopCode: '',
deviceId: '',
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var getShopInfo = wx.getStorageSync('shopInfo');
if (getShopInfo) {
this.setData({
shopCode: getShopInfo.shop_code,
deviceId: getShopInfo.device_id
})
}else{
wx.redirectTo({
url: '../bindnum/bindnum?type=1'
})
}
},
beginScan: function(){
var _that = this;
api.startScan({
method: 'POST',
data: {
shop_code: this.data.shopCode,
device_id: this.data.deviceId,
method: 'get_phone_scanner_id'
},
success: function(res){
console.log(res.data);
}
});
},
})
5、问题
一开始wx.request中header设置为
header: {
'content-type': 'application/json' // 默认值
},
导致接口调用时,报500
后面查找发现,终于找到了解决方案,将header设置为:
header: {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
},
就可以成功调用了
参考文章: wx.request发送与服务端接受
小程序封装wx.request,以及调用的更多相关文章
- 今天微信小程序发现wx.request不好使了,调试报错: 小程序要求的 TLS 版本必须大于等于 1.2
今天微信小程序发现wx.request不好使了,调试报错: 小程序要求的 TLS 版本必须大于等于 1.2 查官方文档 解决方法 在 PowerShell中运行以下内容, 然后重启服务器 # Enab ...
- 小程序 之wx.request和wx.showModal简单封装
一.request封装 request(url, data, successCallBack = function(data) {}, completeCallBack = function(data ...
- 微信小程序之wx.request:fail错误,真机预览请求无效问题解决,安卓,ios网络预览异常
新版开发者工具增加了https检查功能:可使用此功能直接检查排查ssl协议版本问题: 可能原因:0:后台域名没有配置0.1:域名不支持https1:没有重启工具:2:域名没有备案,或是备案后不足24小 ...
- 微信小程序:wx.request之post请求后端无法获取数据的问题
前言:小程序的开发中总是踩到各种坑,看文档也不知所云: 例如当我们在写微信小程序接口时,method请求方式有POST和GET两种,为了数据安全,我们会偏向于使用POST请求方式访问服务器端: 问题: ...
- 微信小程序请求wx.request数据,渲染到页面
先说一下基本使用.官网也有. 比如说你在App.js里面有这些变量.想修改某些值. data: { main_view_bgcolor: "", border: "&qu ...
- mpvue 小程序 使用wx.request请求数据
1.创建src下创建utils/wx-request.js const host = 'http://10.0.0.6:8081' function request (url, method, dat ...
- 微信小程序设置全局请求URL 封装wx.request请求
app.js: App({ //设置全局请求URL globalData:{ URL: 'https://www.oyhdo.com', }, /** * 封装wx.request请求 * metho ...
- 以聚合数据免费接口为例,通过 Class 类继承方法,让小程序实现项目化接口调用
微信小程序数据来源,是通过接口实现的.但接口如何调,数据如何取?每个人都有不同的方法,下面以聚合数据免费接口为例. 配置接口 config.js 聚合数据请求接口需要以key作为参数. const c ...
- 小程序封装一个ajax
小程序中,我们一般习惯把提交接口请求的方法放在一个公共js里面.下面是一个简单实现. (1)我们把所有请求的地址都放在一个json里面 var postAddress = { "domin& ...
随机推荐
- 剑指Offer编程题(Java实现)——删除链表中重复的结点
题目描述 在一个排序的链表中,存在重复的结点,请删除该链表中重复的结点,重复的结点不保留,返回链表头指针. 例如,链表1->2->3->3->4->4->5 处理后 ...
- [LeetCode] 126. 单词接龙 II
题目链接 : https://leetcode-cn.com/problems/word-ladder-ii/ 题目描述: 给定两个单词(beginWord 和 endWord)和一个字典 wordL ...
- 并发编程时守护进程在pycharm与python shell中的运行结果不同
原代码如下 from multiprocessing import Process import time import random def task(name): print('%s is run ...
- 发布一本用 GitBook 编辑的书
在上一篇的文章里,我们已经写好了一本名叫 erdong-first-book 的书,但是在本地浏览很不方便,我们希望放到网络上,可以随时.方便的访问这个书籍.这个需求可以使用多种方式来实现,比如第一种 ...
- angularJS(三):服务(Service)、http
一.服务 服务是一个函数或对象,可在你的 AngularJS 应用中使用. 可以创建自己的服务,或使用内建服务 $location 注意 $location 服务是作为一个参数传递到 controll ...
- 两个 DataTable 读取重复数据,dataTable1与dataTable2不同
protected void Page_Load(object sender, EventArgs e) { DataTable dt = new DataTable(); dt.Columns.Ad ...
- vue解决开发时候跨域问题
vue项目/config/index.js 找到dev对象,增加如下代码 proxyTable: { '/api': { target: 'http://192.168.1.208:8888', ch ...
- C语言scanf的返回值
#include <stdio.h> int main(void) { long num; long sum = 0L; int status; printf("Please e ...
- Spring基础13——Spring表达式语言:SpEL
1.SpEL简介 Spring表达式语言(简称SpEL):是一个支持运行时查询和操作对象图的强大的表达式语言.语法上类似于EL:SpEL使用#{...}作为界定符,所有在大框号中的字符都将被认为是Sp ...
- 028-实现阿里云ESC多FLAT网络
实现类似于阿里云ECS的网络结构,其效果为云主机拥有两块和两个不同的网络,一个网络是用于用于和外网连接,一个用于内网通信,但宿主机上至少有两个网卡,整体配置如下:1.在wmare里给宿主机添加一块网卡 ...