Directorio de artículos
Tutorial básico y encapsulación de solicitudes de red
Tutorial básico de solicitud de red
WeChat proporciona una interfaz API dedicada para solicitudes de red:wx.request(Object object)
| Atributos | escribe | valores predeterminados | Requerido | ilustrar |
|---|---|---|---|---|
| URL | cuerda | Sí | Dirección de la interfaz del servidor del desarrollador | |
| datos | cadena/objeto/ArrayBuffer | no | solicitar parámetros | |
| encabezamiento | Objeto | no | Establezca el encabezado de la solicitud. El Referer no se puede establecer en el encabezado. content-typeEl valor predeterminado esapplication/json |
|
| se acabó el tiempo | número | no | Tiempo de espera en milisegundos. El valor predeterminado es 60000 | |
| método | cuerda | OBTENER | no | Método de solicitud HTTP |
| tipo de datos | cuerda | json | no | formato de datos devuelto |
| tipo de respuesta | cuerda | texto | no | tipo de datos de la respuesta |
Los atributos clave entre los atributos anteriores son los siguientes :
url: se debe pasar, de lo contrario solicitar algo.
datos: parámetro de solicitud
método: el método de la solicitud
éxito: devolución de llamada en caso de éxito
fallar: devolución de llamada en caso de falla
Tutorial básico de la API de solicitud de red
Generalmente, enviamos solicitudes de red en el ciclo de vida onLoad de la página
Directamente
wx.request(Object object)enviando una solicitud GET sin parámetros:
Page({
data: {
allCities: {
}
},
// onLoad生命周期发送网络请求
onLoad() {
wx.request({
// 发送网络请求的地址
url: "http://123.207.32.32:1888/api/city/all",
// 拿到请求的结果
success: (res) => {
// 将获取的结果保存到data中
const data = res.data.data
this.setData({
allCities: data
})
},
// 拿到错误信息
fail: (err) => {
console.log(err);
}
})
}
})
Directamente
wx.request(Object object)enviando una solicitud GET con parámetros:
Page({
onLoad() {
wx.request({
url: 'http://123.207.32.32:1888/api/home/houselist',
// 无论是POST请求还是GET请求, 参数都是在data中传递
data: {
page: 1
},
success: (res) => {
console.log(res);
},
fail: (err) =>{
console.log(err);
}
})
}
})
Nombre de dominio de configuración de solicitud de red
Cada applet de WeChat necesita establecer un nombre de dominio de comunicación por adelantado, y el applet solo puede comunicarse con el nombre de dominio especificado .
Fondo de inicio de sesión de programa pequeño - gestión de desarrollo - configuración de desarrollo - nombre de dominio del servidor;
Configure el nombre de dominio del servidor en "Antecedentes del mini programa - Desarrollo - Configuración de desarrollo - Nombre de dominio del servidor" .
Los nombres de dominio solo admiten los protocolos https (wx.request, wx.uploadFile, wx.downloadFile) y wss (wx.connectSocket);
El nombre de dominio no puede usar una dirección IP (excepto la IP de la red de área local del applet) o localhost;
Los puertos se pueden configurar, como https://myserver.com:8080, pero después de la configuración, solo se pueden realizar solicitudes a https://myserver.com:8080. Las solicitudes a URL como https://myserver.com, https://myserver.com:9091, etc. fallarán.
Si no hay ningún puerto configurado. Por ejemplo, https://myserver.com, la URL solicitada no puede contener el puerto, ni siquiera el puerto 443 predeterminado. Las solicitudes a https://myserver.com:443 fallarán.
El nombre de dominio debe pasar por el registro ICP;
Por motivos de seguridad, api.weixin.qq.com no se puede configurar como un nombre de dominio del servidor y no se puede llamar a las API relacionadas dentro del subprograma. El desarrollador debe guardar AppSecret en el servidor de fondo, usar la interfaz getAccessToken para obtener access_token a través del servidor y llamar a la API correspondiente;
No se admite configurar el nombre de dominio principal y usar el nombre de subdominio.
Encapsulación de solicitudes de red
La solicitud de red proporcionada por el applet es muy engorrosa de usar y es propensa al infierno de devolución de llamada, por lo que generalmente encapsulamos la solicitud de red del applet
Hay dos ideas para encapsular solicitudes de red:
Idea 1: Encapsular como una función
export function yqRequest(options) {
return new Promise((resolve, reject) => {
wx.request({
...options,
success: (res) => {
resolve()
},
fail: reject
})
})
}
- De esta forma, podemos usar esta función para enviar solicitudes de red, y usar esta función para enviar solicitudes de red para obtener resultados a través de Promise o async and await
import {
yqRequest } from "../../service/index"
Page({
onLoad() {
// 通过Promise获取结果
yqRequest({
url: "http://123.207.32.32:1888/api/city/all"
}).then(res => {
console.log(res);
})
yqRequest({
url: 'http://123.207.32.32:1888/api/home/houselist',
data: {
page: 1
}
}).then(res => {
console.log(res);
})
}
})
import {
yqRequest } from "../../service/index"
Page({
onLoad() {
// 此处调用封装的异步函数
this.getCityData()
this.getHouseListData()
},
// 使用async和await获取结果, 为了防止同步最好再封装成独立方法
async getCityData() {
const cityData = await yqRequest({
url: "http://123.207.32.32:1888/api/city/all"
})
console.log(cityData);
},
async getHouseListData() {
const houseListData = await yqRequest({
url: 'http://123.207.32.32:1888/api/home/houselist',
data: {
page: 1
}
})
console.log(houseListData);
}
})
Idea 1: encapsular en una clase ( la encapsulación en una clase tiene una mayor escalabilidad )
// 网络请求封装成类
class YQRequest {
// 传入配置的baseurl
constructor(baseUrl) {
this.baseUrl = baseUrl
}
request(options) {
const {
url } = options
return new Promise((resolve, reject) => {
wx.request({
...options,
url: this.baseUrl + url,
success: (res) => {
resolve(res)
},
fail: reject
})
})
}
get(options) {
return this.request({
...options, method: "get" })
}
post(options) {
return this.request({
...options, method: "post" })
}
}
export const yqRequest = new YQRequest("http://123.207.32.32:1888/api")
- El uso de una instancia de una clase para enviar una solicitud de red también puede obtener el resultado a través de Promise o async and await (async y await ya no se muestran aquí )
import {
yqRequest } from "../../service/index"
Page({
onLoad() {
// 使用类的实例发送网络请求
yqRequest.request({
url: "/city/all"
}).then(res => {
console.log(res);
})
yqRequest.get({
url: '/home/houselist',
data: {
page: 1
}
}).then(res => {
console.log(res);
})
}
})