¡Acostúmbrate a escribir juntos! Este es el día 14 de mi participación en el "Desafío de actualización de abril del nuevo plan diario de Nuggets", haga clic para ver los detalles del evento .
prefacio
Ayer, implementamos la intercepción de inicio de sesión y el procesamiento de la lista blanca del applet. Hoy, optimizaremos el hoyo dejado ayer y luego escribiremos un método para pasar el valor entre los componentes principal y secundario.
Con respecto al manejo del problema de pasar un token vacío cuando la solicitud no se completa: manejo de promesas
Explicaré las razones y soluciones cuidadosamente desde los siguientes aspectos.
la causa del problema
Cuando llamamos a la interfaz de back-end según el método inicial, todo el proceso es asíncrono. En este punto, cuando devolvemos el valor, el backend no ha terminado de procesar nuestra solicitud y nuestro valor no cambiará.
La solución - promesa
Cuando encapsulamos una solicitud unificada, ya hemos usado la promesa para encapsularla. Aquí también usamos la promesa para resolver el problema de que las solicitudes asíncronas se ejecutan hacia abajo sin ejecutar el método. Si no conoce las promesas, puede consultar las nuevas funciones. de ES6 y aprende sobre ellos.
solicitud final/index.tsx
import Taro from "@tarojs/taro";
const white_res_code = [200, 10001, 10002];
const white_uri = ["/auth/login"];
import { loginByCode } from "../api/user";
function getTokenByApi() {
return new Promise((resolve) => {
Taro.login({
success: (res) => {
loginByCode(res.code).then((res) => {
resolve(res["token"]);
});
},
});
});
}
async function request(url, data, method): Promise<any> {
let notNeedTokenflag =
white_uri.filter((item) => url.includes(item)).length > 0;
let token = Taro.getStorageSync("token");
if (!notNeedTokenflag && (!token || token === "")) {
token = await getTokenByApi();
Taro.setStorageSync("token", token);
}
const header = {
"content-type": "application/json",
};
if (!notNeedTokenflag) {
header["Authorization"] = `Bearer ${token}`;
}
return new Promise((resolve) => {
let retryCount = Taro.getStorageSync("returCount") || 0;
if (retryCount >= 10) {
setTimeout(() => {
Taro.removeStorageSync("returCount");
}, 5000);
return Taro.showToast({
title: "您已被限制5秒内不可以访问接口",
icon: "none",
});
}
Taro.request({
url,
data,
method,
header,
})
.then((res) => {
if (res.statusCode === 200) {
const backEndRes = res.data;
const resCode = backEndRes.code;
if (!white_res_code.includes(resCode)) {
switch (resCode) {
case 500:
return Taro.showToast({
title: "请求失败,系统异常:" + backEndRes.msg,
icon: "none",
});
case 401:
Taro.removeStorageSync("token");
Taro.setStorageSync("returCount", retryCount + 1);
request(url, data, method);
return Taro.showToast({
title: "请求失败,请您登陆:" + backEndRes.msg,
icon: "none",
});
case 403:
Taro.removeStorageSync("token");
Taro.setStorageSync("returCount", retryCount + 1);
request(url, data, method);
return Taro.showToast({
title: "请求失败,暂无权限:" + backEndRes.msg,
icon: "none",
});
default:
return Taro.showToast({
title: "请求失败:" + res.data.error,
icon: "none",
});
}
} else {
resolve(backEndRes.data);
}
resolve(res.data);
} else {
Taro.showToast({ title: "请求失败:" + res.data.error, icon: "none" });
}
})
.catch((err) => {
Taro.showToast({ title: "网络错误,提示:" + err.errMsg, icon: "none" });
});
});
}
function get(url) {
return request(url, null, "GET");
}
function post(url, data) {
return request(url, data, "POST");
}
function del(url) {
return request(url, null, "DELETE");
}
function put(url, data) {
return request(url, data, "POST");
}
export { get, post, del, put };
复制代码Explica brevemente
- Agregue async antes del método de solicitud para identificarlo como una función asíncrona
- Agregue el método de espera donde llama para obtener el token
- Modifique el método para obtener el token para que sea el método que devuelve la promesa
Ahora hablemos sobre el contenido más importante hoy, pasar valores entre componentes padre e hijo
Escena de negocios
Tenemos muchos escenarios comerciales que requieren pasar valores entre componentes principales y secundarios. Es más común que después de que el componente principal obtiene la lista, se pasa el componente principal para obtener los detalles al hacer clic en la palabra componente. Después de que el componente secundario actualice los datos correspondientes, el componente principal debe actualizarse o el componente secundario debe cerrarse desde el componente principal.
Echemos un vistazo a los métodos comunes de Vue
- Pase la referencia del componente principal al componente secundario y luego llame a la asignación de método del componente secundario, por ejemplo
this.$refs("child").open(id) - Pase parámetros a través de la propiedad prop del componente secundario, por ejemplo
<child id={chooseData.id}> - El administrador de estado pasa parámetros. Esta forma de pasar parámetros es relativamente pequeña, pero generalmente los proyectos más complejos a menudo usan más
Implementación del paso de parámetros utilizando componentes padre-hijo basados en reacciones
página de índice del carrito de compras
import { View, Text } from "@tarojs/components";
import { useEffect, useState } from "react";
import ShopCartItem from "./shop-cart-item";
import "./index.scss";
export default function ShopCart() {
const [shopCartList, setShopCartList] = useState([]);
useEffect(() => {
setShopCartList([
{ id: "1", name: "第1个商品", price: 100, num: 4 },
{ id: "2", name: "第2个商品", price: 200, num: 3 },
{ id: "3", name: "第3个商品", price: 300, num: 2 },
{ id: "4", name: "第4个商品", price: 400, num: 1 },
]);
}, []);
return (
<View className="shop-cart">
{shopCartList.map((item,index) => (<ShopCartItem item={item}></ShopCartItem>)
)}
<Text>共{shopCartList.length}条数据</Text>
</View>
);
}
复制代码Página del artículo del carrito
import { View, Text } from "@tarojs/components";
import { Component } from "react";
import "./index.scss";
class ShopCartItem extends Component {
constructor(props) {
super(props);
item: {
}
}
render() {
const item = this.props["item"];
return (
<View className="shop-cart-item">
<Text>商品名称{item.name}</Text>
</View>
);
}
}
export default ShopCartItem;
复制代码Epílogo
No tengo suficiente tiempo todos los días, y estoy flotando al borde de las palomas todos los días. Hoy, completemos los requisitos de la transferencia de datos principal a los componentes secundarios, y agreguemos el código de transferencia secundaria al padre mañana (de hecho, se ha desarrollado, pero la función no se ha realizado). ¡Bienvenidos a todos a prestar más atención y dar me gusta!