目录
1、网络请求基本使用
微信小程序提供了专属的 API 接口,用于发送网络请求:wx.request(Object object),详情参考 官方文档。网络请求一般在页面的生命周期函数中执行,一旦页面加载完成(onLoad() 生命钩子),即发送网络请求。这里需要注意的是,发送网络请求时如果涉及到跨域问题,则需要事先设置通讯域名,小程序只可以跟指定的域名与进行网络通信 — 官方文档。
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
url | string | 是 | 开发者服务器接口地址 | |
data | string/object/ArrayBuffer | 否 | 请求的参数 | |
header | Object | 否 | 设置请求的 header,header 中不能设置 Referer。content-type 默认为 application/json |
|
timeout | number | 否 | 超时时间,单位为毫秒 | |
method | string | GET | 否 | HTTP 请求方法 |
dataType | string | json | 否 | 返回的数据格式 |
responseType | string | text | 否 | 响应的数据类型 |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
//pages/home/home.js
Page({
data:{ },
onLoad: function (options){ //一般在 onLoad() 生命钩子中发送网络请求
//发送最简单的get请求
wx.request({
url:'http://httpbin.org', //网络接口允许与局域网IP通信,但要注意不允许与本机IP通信
success: function(res){ //如果域名暂时没备案或申请,可暂时先到编译器的详情设置不校验合法域名
console.log(res);
}
})
//携带参数的get请求,参数需要放到data中
wx.request({
url:'http://httpbin.org',
data:{ name:'erha', pwd:18 },
success: function(res){ console.log(res); }
})
//发送post请求,并且携带参数
wx.request({
url:'http://httpbin.org/post',
method:'post',
data:{ name:'erha', pwd:18 },
success: function(res){ console.log(res); },
fail: function(err){ console.log(err); }
})
}
})
2、通讯域名配置流程
3、网络请求的封装 Promise
3.1、为啥要封装网络请求模块:如果对每个需要发送网络请求的页面或组件都引入 wx.request 的话,这样整个项目对 wx.request 的依赖性太大了,一旦 wx.request 崩了,或者被官宣不再继续维护了,那你这个项目就 mmp 了,你懂我意思吧,所以就要对 wx.request 模块进行封装,单独搞一个文件对 wx.request 做一个封装,之后所有的页面或组件在进行网络请求的时候都面向这一个文件,假如一旦有一天 wx.request 不再维护了,也根本不慌,只需要对 wx.request 封装的文件进行修改就完事了,真是个小机灵鬼。
3.2、怎么封装 wx.request 模块:一般在小程序的根目录下新建一个 service/network.js 文件用来封装 wx.request;
//service/network.js
import{baseURL, timeout} from "./config.js" //可以对baseURL和timeout进行全局提取
export default function request(options){
return new Promise((resolve,reject) => { //Promise最大的好处就是防止出现回调地狱
wx.request({
url: baseURL + options.url,
time: timeout,
method: options.method || ' get',
data: options.data || {},
success: function(res){ resolve(res); },
//fail: function(err){ reject(err); }
fail: reject //可以直接这样写,success也是
})
})
}
//pages/home/home.js
import request from "/service/network.js"
Page({
data:{ },
onLoad: function (options){ //一般在 onLoad() 生命钩子中发送网络请求
//使用封装的request发送网络储求
request({
url:'http://httpbin.org',
data:{ name:'erha', pwd:18 },
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
}
})
4、进一步的封装思想
项目中的图片和数据一般会放到服务器上,因此在展示数据之前需要先拿到数据,这个时候就需要在页面加载(onLoad())时发送网络请求,为了避免在每个页面都使用 wx.request() 方法,使项目和该方法的耦合度太高,就需要对网络请求的方法进行封装:在新建的 service 文件夹下新建 network.js 文件,还可以提取 baseURL、timeout 公共变量到 config.js 文件中方便后期维护。
除此之外,每个页面请求的数据最好分开,比如 home 页面需要请求的数据的方法,最好定义在 service 文件夹下新建 home.js 文件中,需要引用 network.js 组件,具体代码如下:
//service/config.js
const baseURL = 'http://127.0.0.1:8000';
const timeout = 5000;
//service/network.js
import { baseURL, timeout} from './config.js'
export default function(options){
wx.showLoading({ title: '数据加载中ing' })
return new Promise((resolve,reject) => {
wx.request({
url: baseURL + options.url,
timeout: timeout,
method: options.method || 'get',
data: options.data || {},
success: function (res) {
resolve(res.data)
},
fail: reject,
complete: res => {
wx.hideLoading()
}
})
})
}
//service/home.js
import request from './network.js'
export function getMultiData() {
return request({
url: '/home/multidata'
})
}
// pages/home/home.js
import { getMultiData } from '../../service/home.js'
Page({
data: { banners:[] },
onLoad: function (options) {
//请求图片及数据
getMultiData().then(res => {
const banners = res.data.banner.list;
this.setData({ //将banners数据放到data中
banners:banners
})
})
}
})