网络请求
原创...大约 2 分钟
发起 HTTPS 网络请求,从后端获取数据,显示在页面之上
基本使用
通过wx.request
请求数据
Page({
onLoad(options) {
wx.request({
url: "https://iwenwiki.com/api/blueberrypai/getChengpinDetails.php",
success(res) {
console.log(res.data);
},
});
},
});
注意
在小程序中使用网络相关的 API 时,需要注意下列问题,请开发者提前了解
每个微信小程序需要事先设置通讯域名,小程序只可以跟指定的域名进行网络通信(生产环境)
通过开发者工具配置:“不效验合法域名” (开发环境)
常用参数
我们了解了基本的网络请求之后,在考虑在网络请求中的属性如何使用。例如:如何传递参数?
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
url | string | 是 | 开发者服务器接口地址 | |
data | string/object/ArrayBuffer | 否 | 请求的参数 | |
header | Object | 否 | 设置请求的 header,header 中不能设置 Referer。 content-type 默认为 application/json | |
timeout | number | 否 | 超时时间,单位为毫秒。默认值为 60000 | |
method | string | GET | 否 | HTTP 请求方法 常用的方式 GET 和 POST |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
Page({
data: {
chengpinDetails: [],
},
onLoad() {
wx.request({
url: "http://iwenwiki.com:3002/api/foods/list",
method: "GET",
data: {
city: "北京",
},
header: {
"content-type": "application/json",
},
timeout: 5000,
success(res) {
console.log(res.data);
},
fail(error) {
console.log(error);
},
complete() {
console.log("网络请求完成");
},
});
},
});
封装网络请求
新建 /api/request.ts
文件
function request(url: any, method: any, data: any) {
wx.showLoading({
title: "加载中...",
mask: true,
});
const promise = new Promise((resolve, reject) => {
wx.request({
url: url,
method: method,
data: data,
header: {
"Content-Type": "application/x-www-form-urlencoded",
},
success(res) {
resolve(res);
},
fail(err) {
reject(err);
},
complete() {
wx.hideLoading();
},
});
});
return promise;
}
module.exports = {
request,
};
export {};
新建 /api/index.ts
文件
const { request } = require("./request");
const base = {
baseUrl: "http://iwenwiki.com:3002",
getList: "/api/foods/list", // 获取列表接口
toLogin: "/api/user/login", // 登录接口
};
function getList(data: any) {
return request(base.baseUrl + base.getList, "GET", data);
}
function toLogin(data: any) {
return request(base.baseUrl + base.toLogin, "POST", data);
}
module.exports = {
getList,
toLogin,
};
export {};
使用
const { getList } = require("../../api/index");
Page({
data: {
chengpinDetails: [],
},
onLoad() {
getList({ city: "北京" }).then((res: any) => {
console.log(res.data);
});
},
});
Powered by Waline v2.15.7