官方 API 文档:
https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html
官方 指南 文档:
https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html
微信提供了 wx.request(Object object)
用来发起网络请求,
其中,object 可传递的内容包括:
在使用网络请求 API 前需要先在 小程序后台
-开发
-开发设置
-服务器域名
中配置服务器域名。不配置的话触发网络请求时会报错。
测试阶段可以在 微信开发者工具 界面中勾选 详情
-本地设置
中的 不校验合法域名
。
测试网络请求时,可以使用 httpbin.org
// pages/about/about.js
Page({
onLoad: function (options) {
// 1. 基本的 Get 请求——不携带参数
wx.request({
url: 'http://httpbin.org/get',
success: function (res) {
// 接口请求成功时打印数据
console.log(res)
}
})
}
})
// pages/about/about.js
Page({
onLoad: function (options) {
// 2. Get 请求携带参数
wx.request({
url: 'http://httpbin.org/get',
data:{ // 发起请求时携带的数据
type:'sell',
page:1
},
success:function(res){
// 接口请求成功时打印数据
console.log(res)
},
fail:function(err){
// 接口请求失败
console.log(err)
}
})
}
})
// pages/about/about.js
Page({
onLoad: function (options) {
// 3. Post 请求携带参数
wx.request({
url: 'http://httpbin.org/post',
method:'post',
data:{ // 发起请求时携带的数据
type:'sell',
page:1
},
success:function(res){
// 接口请求成功时打印数据
console.log(res)
}
})
}
})
降低网络请求和 wx.request() 的耦合,参考前端的网络框架——axios 使用 Promise 的方式封装一个工具类。
// 定义函数,并使用 es6 中的 export default 方式导出——让外部可以调用
export default function request(options) {
// 此处使用了 Promise 语法
return new Promise((resolve, reject) => {
wx.request({
url: options.url,
method: options.method || "get",
data: options.data || {},
success:resolve,
fail:reject
// 下面两个函数可以简写为上面两行
// success: function (res) {
// resolve(res)
// },
// fail: function (err) {
// reject(err)
// }
})
})
}
// pages/about/about.js
// 此处导入时必须写相对于当前 js 的相对路径
import request from "../../services/network.js"
Page({
onLoad: function (options) {
// 调用自定义的 promise 方式的 request 函数
request({
url: 'http://httpbin.org/get',
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
}
})