1. 介绍
1.1. wx.request(Object object)
微信提供了 wx.request(Object object)
用来发起网络请求,
其中,object 可传递的内容包括:
1.2. 注意事项
在使用网络请求 API 前需要先在 小程序后台
-开发
-开发设置
-服务器域名
中配置服务器域名。不配置的话触发网络请求时会报错。
测试阶段可以在 微信开发者工具 界面中勾选 详情
-本地设置
中的 不校验合法域名
。
2. 基本使用
测试网络请求时,可以使用 httpbin.org
2.1. 无参 Get
// pages/about/about.js
Page({
onLoad: function (options) {
// 1. 基本的 Get 请求——不携带参数
wx.request({
url: 'http://httpbin.org/get',
success: function (res) {
// 接口请求成功时打印数据
console.log(res)
}
})
}
})
2.2. 有参 GET 请求
// 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)
}
})
}
})
2.3. 有参 POST 请求
// 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)
}
})
}
})
3. 封装请求
降低网络请求和 wx.request() 的耦合,参考前端的网络框架——axios 使用 Promise 的方式封装一个工具类。
-
network.js
// 定义函数,并使用 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)
// }
})
})
}
-
about.js
// 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)
})
}
})