Remix loader 函数是一个获取以后页面页面数据的函数，常常与 useLoaderData 一起配合应用

以后 Remix 版本：1.15.0

次要内容

  • 定义形式
  • loader 与 useLoaderData 应用
  • 返回值类型以及应用办法
  • 参数/上下文
  • 重定向
  • 错误处理
  • laoder 操作纯 api 输入数据应用

loader 函数定义

  • Remix Route 中定义 loader 函数
  • export 对外裸露
  • 返回 json/defer/ new Response 实例等

常常与 ORM/ODM 进行交互，从数据库获取数据。

loader 函数配合 useLoaderData 一起应用

import { json } from "@remix-run/node"; // or cloudflare/denoexport const loader = async () => {  return json({ ok: true });};export default function Users() {  const data = useLoaderData();  return (    <>{JSON.stringly(data)}</>  );}

loader 函数返回值

  • json 个别是同步数据，json 函数能够指定两个参数，第一个是 指标数据，第二个是 http 状态
export const loader = () => {  json({jsonKey: "jsonValue"})}export const loader = () => {  json({jsonKey: "jsonValue"}, {    status: 200,    headers: {      "Cache-Control": "no-store"    }  })}
  • defer 容许返回一个 promise, 个别配合 Await 组件应用

json 数据个别是返回一个同步 json 对象，然而 defer 容许咱们返回值能够是一个 promise

import { defer } from "@remix-run/node"; // or cloudflare/denoexport const loader = async () => {  const thePromise = loadSlowDataAsync(); // 产生一个 Promise 值  // So you can write this without awaiting the promise:  return defer({    critical: "data",    slowPromise: thePromise, // 间接将 Promise 的值交给 defer  });};

值得注意的是 defer 返回的值不间接应用，须要配合 Suspense + Await 组件应用, 上面是一个 loader 返回 defer 的示例：

import { defer } from "@remix-run/node";import { Await, useLoaderData } from "@remix-run/react";import { Suspense } from "react";export const loader = () => {  let p = new Promise((resolve) => {    setTimeout(() => {      resolve("defer a promise value");    }, 2000);  });  return defer({    pv: p,  });};export default function Defer() {  const data = useLoaderData();  console.log(data);  return (    <div>      <div>This is defer value: </div>      <Suspense fallback={<div>Loading...</div>}>        <Await resolve={data.pv}>{(data) => <div>{data}</div>}</Await>      </Suspense>    </div>  );