{"id":45958,"date":"2025-07-30T02:01:15","date_gmt":"2025-07-29T18:01:15","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/45958.html"},"modified":"2025-07-30T02:01:15","modified_gmt":"2025-07-29T18:01:15","slug":"%e5%bf%ab%e9%80%9f%e6%90%ad%e5%bb%ba%e6%9c%8d%e5%8a%a1%e5%99%a8%ef%bc%8cfetch%e8%af%b7%e6%b1%82%e4%bb%8e%e6%9c%8d%e5%8a%a1%e5%99%a8%e8%8e%b7%e5%8f%96%e6%95%b0%e6%8d%ae","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/45958.html","title":{"rendered":"\u5feb\u901f\u642d\u5efa\u670d\u52a1\u5668\uff0cfetch\u8bf7\u6c42\u4ece\u670d\u52a1\u5668\u83b7\u53d6\u6570\u636e"},"content":{"rendered":"

\u00a01.strapi<\/h2>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u9996\u5148strapi\u662f\u4e00\u4e2aapi\u7ba1\u7406\u7cfb\u7edf，\u53ef\u4ee5\u8ba9\u6211\u4eec\u76f4\u63a5\u7528\u7f51\u9875\u7684\u5f62\u5f0f\u53bb\u5b9a\u4e49\u81ea\u5df1\u7684api，\u5305\u62ec\u8bbe\u7f6e\u6a21\u578b\u548c\u6743\u9650\u7b49\u529f\u80fd\u3002<\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u9996\u5148\u76f4\u63a5\u5728\u9879\u76ee\u76ee\u5f55\u91cc\u9762\u5b89\u88c5\u5e93\u3002npx create-strapi@latest server –quickstart\u8fd9\u6837\u5c31\u53ef\u4ee5\u76f4\u63a5\u5728\u9879\u76ee\u76ee\u5f55\u521b\u5efa\u4e00\u4e2a\u8fde\u63a5\u6570\u636e\u5e93\u7684\u670d\u52a1\u5668\u4e86\u3002\u4e0d\u7528\u6211\u4eec\u53bb\u4e66\u5199\u4ee3\u7801，\u76f4\u63a5\u5728\u7f51\u9875\u7248\u6570\u636e\u5e93\u6dfb\u52a0\u8868\u4ee5\u53ca\u8868\u4e2d\u7684\u6570\u636e\u5c31\u53ef\u4ee5\u81ea\u52a8\u751f\u6210api\u8ba9\u6211\u4eec\u53bb\u8bbf\u95ee\u8bf7\u6c42\u4e86\u3002<\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"\"<\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u5c31\u662f\u8fd9\u79cd，\u6211\u4eec\u7f51\u9875\u5f62\u5f0f\u521b\u5efa\u8868，\u6dfb\u52a0\u6743\u9650，\u81ea\u52a8\u751f\u6210api\u3002\u8fd9\u6837\u6211\u4eec\u5c31\u53ef\u4ee5\u5728\u524d\u7aef\u53d1\u9001\u8bf7\u6c42\u53bb\u83b7\u53d6\u6570\u636e\u4e86\u3002\u503c\u5f97\u4e00\u63d0\u7684\u662f\u8bb0\u5f97npm\u7684\u7248\u672c\u4ee5\u53canode.js\u7248\u672c\u4f1a\u6709\u9650\u5236\u3002<\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u53ef\u4ee5\u88c5\u4e00\u4e2anvm\u7ba1\u7406\u81ea\u5df1\u5f00\u53d1\u9879\u76ee\u7528\u7684node\u3002<\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u6211\u662fmac\u7cfb\u7edf\u6240\u4ee5\u7528brew\u5b89\u88c5nvm brem install nvm，\u7136\u540e\u521b\u5efanvm\u5de5\u4f5c\u76ee\u5f55 mkdir ~\/.nvm<\/p>\n

\u7136\u540e\u914d\u7f6e\u7ec8\u7aef\u73af\u5883\u53d8\u91cf，nano ~\/.zshrc \u7136\u540e\u6587\u4ef6\u5185\u5bb9<\/p>\n

Maestro CLI
\nexport PATH="$HOME\/.maestro\/bin:$PATH"<\/p>\n

OpenJDK 17
\nexport PATH="\/opt\/homebrew\/opt\/openjdk@17\/bin:$PATH"<\/p>\n

nvm \u914d\u7f6e（Homebrew \u8def\u5f84，Apple M \u82af\u7247）
\nexport NVM_DIR="$HOME\/.nvm"
\n[ -s "\/opt\/homebrew\/opt\/nvm\/nvm.sh" ] && \\\\. "\/opt\/homebrew\/opt\/nvm\/nvm.sh"
\n[ -s "\/opt\/homebrew\/opt\/nvm\/etc\/bash_completion.d\/nvm" ] && \\\\. "\/opt\/homebrew\/opt\/nvm\/etc\/bash_completion.d\/nvm"<\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u7136\u540econtrol x\u9000\u51fa \u6309y \u518d\u6309\u56de\u8f66\u4fdd\u5b58\u9000\u51fa\u6210\u529f\u3002\u5728\u6267\u884c\u7acb\u5373\u751f\u6548\u547d\u4ee4 source ~\/.zshrc\u8fd9\u6837nvm\u5c31\u914d\u7f6e\u597d\u4e86\u3002\u6211\u4eec\u7528nvm install 22\u88c5\u4e0a 22\u7248\u672c\u7684node.js\u7136\u540envm use 22\u5c31\u53ef\u4ee5\u521b\u5efastrapi\u9879\u76ee\u4e86\u3002<\/p>\n

2.fetch\u00a0<\/h2>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u4e0a\u9762\u7f51\u9875\u53ef\u4ee5\u770b\u5230\u6211\u4eec\u8def\u7531\u662f\/api\/students,\u90a3\u4e48\u6211\u4eec\u5c31\u53ef\u4ee5\u5c1d\u8bd5\u53bb\u7528fetch（\u6d4f\u89c8\u5668\u81ea\u5e26\u7684\u53d1\u9001\u8bf7\u6c42\u7684api，\u662f\u6d4f\u89c8\u5668\u63d0\u4f9b\u7684\u5168\u5c40\u51fd\u6570，\u8fd4\u56de\u7684\u4e00\u4e2apromise）\u6240\u4ee5\u53ef\u4ee5\u7528\u94fe\u5f0f\u8c03\u7528.then.catch\u56e0\u4e3apromise\u6709\u72b6\u6001，\u8bf7\u6c42\u6210\u529f\u81ea\u52a8\u6267\u884c.then\u5931\u8d25\u4f1a\u81ea\u52a8\u8c03\u7528.catch\u800c\u4e14\u53c2\u6570\u5c31\u662f\u8fd4\u56de\u7684promise\u5b9e\u4f8b\u5bf9\u8c61\u3002<\/p>\n

import React, { useEffect } from 'react'<\/p>\n

export default function App() {
\n const [person, setPerson] = React.useState([])
\n const [show, setShow] = React.useState(false)
\n \/*
\n \u4ece\u63a5\u53e3http:\/\/localhost:1337\/api\/students\u4e2d\u52a0\u8f7d\u6570\u636e
\n \u7ec4\u4ef6\u4e00\u6e32\u67d3\u5c31\u5411\u670d\u52a1\u5668\u53d1\u9001\u8bf7\u6c42\u52a0\u8f7d\u6570\u636e
\n \u7ec4\u4ef6\u521d\u59cb\u5316\u65f6\u5019\u53d1\u9001\u8bf7\u6c42\u6765\u52a0\u8f7d\u6570\u636e
\n *\/
\n useEffect(() => {
\n \/\/\u8bf4\u660e\u6570\u636e\u5f00\u59cb\u52a0\u8f7d\u4e86
\n setShow(true)
\n \/\/\u53d1\u9001\u8bf7\u6c42
\n \/\/fetch()\u7528\u6765\u5411\u670d\u52a1\u5668\u53d1\u9001\u8bf7\u6c42\u52a0\u8f7d\u6570\u636e，Ajax\u7684\u5347\u7ea7\u7248
\n \/\/\u9700\u8981\u4e24\u4e2a\u53c2\u6570 1.\u8bf7\u6c42\u5730\u57402.\u8bf7\u6c42\u4fe1\u606f
\n \/\/promise\u4e24\u4e2a\u7279\u70b9 \u6210\u529f\u548c\u5931\u8d25\u4e24\u4e2a\u56de\u8c03\u51fd\u6570.then\u6210\u529f\u65f6\u5019\u8c03\u7528 .catch\u5931\u8d25\u65f6\u8c03\u7528
\n fetch('http:\/\/localhost:1337\/api\/students\/')
\n .then((res) => {
\n \/\/response\u8868\u793a\u54cd\u5e94\u4fe1\u606f
\n \/\/ console.log(res);
\n return res.json();\/\/\u8be5\u65b9\u6cd5\u53ef\u4ee5\u5c06\u54cd\u5e94\u7684json\u76f4\u63a5\u8f6c\u6362\u4e3ajs\u5bf9\u8c61
\n }).then((data) => {
\n console.log(data.data);
\n \/\/ \u5c06\u52a0\u8f7d\u5230\u7684\u6570\u636e\u8bbe\u7f6e\u8fdbstate\u4e2d
\n setPerson(data.data)
\n setShow(false)
\n })
\n .catch(() => { })
\n }, [])
\n return (
\n <div>
\n {show ? (
\n <p>\u6b63\u5728\u52a0\u8f7d\u4e2d…<\/p>
\n ) : (
\n person.map((item) => (
\n <div key={item.id}>
\n {item.name} — {item.gender} — {item.age}
\n <\/div>
\n ))
\n )}
\n <\/div>
\n )
\n}<\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u8fd9\u91cc\u6211\u4eec\u6ca1\u6709\u5199fetch\u53d1\u9001\u8bf7\u6c42\u7684\u7c7b\u578b，\u6240\u4ee5\u662fget\u3002\u8fd9\u91cc\u5c55\u793a\u6570\u636e\u6210\u529f，\u8bf4\u660e\u8bbf\u95ee\u6210\u529f\u4e4b\u540e\u628a\u6570\u636e\u8fd4\u56de\u6765\u4e86，\u4f46\u662f\u7b2c\u4e00\u6b21\u662fjson\u7c7b\u578b<\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"\"<\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u6211\u4eec\u9700\u8981\u53bb\u8f6c\u5316\u6210\u5bf9\u8c61\u3002\u6bd4\u5982\u8fd9\u91cc\u518d\u6b21\u4f7f\u7528.then\u662f\u56e0\u4e3a\u524d\u9762\u7684.then\u628ajson\u8f6c\u5316\u4e3ajs\u5bf9\u8c61\u3002\u7136\u540ereturn\u8fd4\u56de\u7684\u4e5f\u662f\u4e00\u4e2apromise\u5b9e\u4f8b\u5bf9\u8c61\u3002\u6240\u4ee5\u53ef\u4ee5.then，\u62a5\u9519.catch\u6355\u6349\u3002\u00a0<\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"\"<\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u8fd9\u91cc\u8f6c\u5316\u7684js\u5bf9\u8c61\u6709\u4e24\u4e2a\u5c5e\u6027\u4e00\u4e2a\u662fdata，\u4e00\u4e2a\u662fmeta（\u4e0d\u8ba4\u8bc6），\u4f46\u662f\u6211\u4eec\u5c55\u5f00\u786e\u5b9a\u6211\u4eec\u9700\u8981\u7684\u662fdata\u91cc\u9762\u7684\u5bf9\u8c61\"\"\u00a0<\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u6240\u4ee5\u7528setState\u53bb\u5b58\u4f4f\u8fd4\u56de\u6765\u7684\u6570\u636e\u5c31\u53ef\u4ee5\u53bb\u5c55\u793a\u5230\u9875\u9762\u4e0a\u9762\u4e86\u3002\u5c31\u5b9e\u73b0\u4e86\u7b2c\u4e00\u6b21\u7528fetch\u8bf7\u6c42api\u54cd\u5e94\u6570\u636e\u5c55\u793a\u7684\u8fc7\u7a0b\u4e86\u3002<\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u4f46\u662f\u6211\u4eec\u8981\u77e5\u9053\u8fd8\u6709\u4e00\u4e2a.catch\u6211\u4eec\u6ca1\u6709\u53bb\u5199，\u6bd4\u5982\u6211\u4eec\u53bb\u6389\u8def\u7531students\u4e2d\u7684s，<\/p>\n

\"\"\u00a0<\/p>\n

\"\"\u00a0<\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u8fd4\u56de404\u4f46\u662f\u95ee\u9898\u662fmap\u4e5f\u5c31\u662fmap\u65b9\u6cd5\u9519\u4e86\u6240\u4ee5\u8bf7\u6c42\u6574\u4e2a\u8fc7\u7a0b\u8fd8\u662f\u6267\u884c\u4e86？\u8fd9\u5f88\u660e\u663e\u4e0d\u5bf9\u3002\u4f46\u662f\u6211\u4eec\u770b\u5230ok\u53d8\u4e3afalse，\u90a3\u4e48\u6211\u4eec\u5c31\u53ef\u4ee5\u53bb\u622a\u65ad\u8fd9\u4e2a\u8bf7\u6c42\u8fc7\u7a0b\u3002\u800c\u4e14statusText\u90fd\u53d8\u4e86\u3002<\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"\"<\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u5bf9\u6bd4\u6211\u4eec\u5c31\u77e5\u9053\u5982\u679c\u9519\u4e86，ok\u548cstatueText\u4f1a\u6539\u53d8，\u90a3\u5c31\u5bf9\u8fd9\u4e9b\u8fdb\u884c\u5224\u65ad\u3002<\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"\"\u00a0<\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u6bd4\u5982\u8fd9\u91cc，\u8fd9\u6837\u5982\u679c\u9519\u8bef\u5c31\u4e0d\u4f1a\u518d\u6267\u884c\u8bf7\u6c42\u540e\u9762\u7684\u4ee3\u7801\u4e86\u3002\u56e0\u4e3a\u53ea\u6709\u6210\u529f\u624d\u4f1a\u8fd4\u56depromise\u5b9e\u4f8b\u5bf9\u8c61，\u624d\u53ef\u4ee5\u8c03\u7528\u540e\u9762\u7684.then，\u800c\u4e14.catch\u6ca1\u6709\u5185\u5bb9\u6240\u4ee5\u4ec0\u4e48\u90fd\u6ca1\u6709\u3002<\/p>\n

import React, { useEffect } from 'react'<\/p>\n

export default function App() {
\n const [person, setPerson] = React.useState([])
\n const [show, setShow] = React.useState(false)
\n const [err, setError] = React.useState(null)
\n \/*
\n \u4ece\u63a5\u53e3http:\/\/localhost:1337\/api\/students\u4e2d\u52a0\u8f7d\u6570\u636e
\n \u7ec4\u4ef6\u4e00\u6e32\u67d3\u5c31\u5411\u670d\u52a1\u5668\u53d1\u9001\u8bf7\u6c42\u52a0\u8f7d\u6570\u636e
\n \u7ec4\u4ef6\u521d\u59cb\u5316\u65f6\u5019\u53d1\u9001\u8bf7\u6c42\u6765\u52a0\u8f7d\u6570\u636e
\n *\/
\n useEffect(() => {
\n \/\/\u8bf4\u660e\u6570\u636e\u5f00\u59cb\u52a0\u8f7d\u4e86
\n setShow(true)
\n \/\/\u53d1\u9001\u8bf7\u6c42
\n \/\/fetch()\u7528\u6765\u5411\u670d\u52a1\u5668\u53d1\u9001\u8bf7\u6c42\u52a0\u8f7d\u6570\u636e，Ajax\u7684\u5347\u7ea7\u7248
\n \/\/\u9700\u8981\u4e24\u4e2a\u53c2\u6570 1.\u8bf7\u6c42\u5730\u57402.\u8bf7\u6c42\u4fe1\u606f
\n \/\/promise\u4e24\u4e2a\u7279\u70b9 \u6210\u529f\u548c\u5931\u8d25\u4e24\u4e2a\u56de\u8c03\u51fd\u6570.then\u6210\u529f\u65f6\u5019\u8c03\u7528 .satch\u5931\u8d25\u65f6\u8c03\u7528
\n fetch('http:\/\/localhost:1337\/api\/students\/')
\n .then((res) => {
\n \/\/\u5224\u65ad\u662f\u5426\u6b63\u5e38\u8fd4\u56de\u54cd\u5e94\u4fe1\u606f
\n if (res.ok) {
\n console.log(res);
\n return res.json()
\n }
\n \/\/\u4ee3\u7801\u8fd0\u884c\u5230\u8fd9\u91cc \u8bf4\u660e\u6ca1\u6709\u52a0\u8f7d\u5230\u6570\u636e
\n \/\/ setShow(false)
\n \/\/\u629b\u51fa\u4e00\u4e2a\u9519\u8bef
\n throw new Error('\u6570\u636e\u52a0\u8f7d\u5931\u8d25')
\n \/\/ response\u8868\u793a\u54cd\u5e94\u4fe1\u606f
\n \/\/ console.log(res);
\n \/\/ return res.json();\/\/\u8be5\u65b9\u6cd5\u53ef\u4ee5\u5c06\u54cd\u5e94\u7684json\u76f4\u63a5\u8f6c\u6362\u4e3ajs\u5bf9\u8c61
\n }).then((data) => {
\n \/\/ console.log(data);
\n \/\/ \u5c06\u52a0\u8f7d\u5230\u7684\u6570\u636e\u8bbe\u7f6e\u8fdbstate\u4e2d
\n setPerson(data.data)
\n setShow(false)
\n })
\n .catch((e) => {
\n \/\/catch\u4e2d\u7684\u56de\u8c03\u51fd\u6570\u7528\u6765\u7edf\u4e00\u5904\u7406\u9519\u8bef
\n \/\/catch\u6267\u884c\u8bf4\u660e\u4e0a\u9762\u4ee3\u7801\u51fa\u9519
\n setShow(false)
\n \/\/ console.log(e);
\n console.log('e', e)
\n setError(e)
\n })
\n }, [])
\n return (
\n <div>
\n {show && <p>\u52a0\u8f7d\u4e2d<\/p>}
\n {err && <p>\u51fa\u9519\u4e86：{err.message}<\/p>}
\n {!show && !err && person.map((item) => (
\n <div key={item.id}>
\n {item.name} — {item.gender} — {item.age}
\n <\/div>
\n ))}
\n <\/div>
\n )
\n}<\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u5f53\u62a5\u9519\u7684\u65f6\u5019\u7528throw new Error（\u2018\u2019）\u6254\u51fa\u4e00\u4e2aerr，\u7136\u540e.catch\u5c31\u53ef\u4ee5\u6355\u6349\u5230\u3002\u8fd9\u6837\u5c31\u5b8c\u6210\u4e86\u6574\u4e2a\u8bf7\u6c42\u7684\u903b\u8f91，\u9996\u5148\u8981\u6709\u4e00\u4e2astate\u63a5\u6536\u54cd\u5e94\u6570\u636e，\u8fd8\u8981\u6709\u4e00\u4e2astate\u53bb\u63a7\u5236\u8bf7\u6c42\u53d1\u9001\u540e\u5982\u679c\u6ca1\u6709\u5373\u4f7f\u54cd\u5e94\u5c55\u793a\u7684\u5185\u5bb9，\u8fd8\u9700\u8981\u4e00\u4e2astate\u53bb\u63a7\u5236\u9875\u9762\u5982\u679c\u62a5\u9519\u4e86\u5c55\u793a\u9519\u8bef\u4fe1\u606f，<\/p>\n

3.async await\u8bed\u6cd5\u7cd6<\/h2>\n

import React, { useEffect } from 'react'<\/p>\n

export default function App() {
\n const [person, setPerson] = React.useState([])
\n const [show, setShow] = React.useState(false)
\n const [err, setError] = React.useState(null)
\n useEffect(() => {<\/p>\n

const fetData = async () => {
\n try {
\n setShow(true)
\n setError(null)
\n const res = await fetch('http:\/\/localhost:1337\/api\/students')
\n if (res.ok) {
\n const data = await res.json()
\n setPerson(data.data)<\/p>\n

} else {
\n throw new Error('\u6570\u636e\u52a0\u8f7d\u5931\u8d25！')
\n }
\n } catch (e) {
\n setError(e)
\n } finally {
\n setShow(false)
\n }
\n }<\/p>\n

fetData()
\n }, [])
\n return (
\n <div>
\n {show && <p>\u52a0\u8f7d\u4e2d<\/p>}
\n {err && <p>\u51fa\u9519\u4e86：{err.message}<\/p>}
\n {!show && !err && person.map((item) => (
\n <div key={item.id}>
\n {item.name} — {item.gender} — {item.age}
\n <\/div>
\n ))}
\n <\/div>
\n )
\n}<\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u00a0<\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u6700\u5f00\u59cb\u6211\u4eec\u4f7f\u7528 fetch \u662f\u901a\u8fc7\u8fde\u7eed\u8c03\u7528 .then \u6765\u4e00\u6b65\u6b65\u83b7\u53d6 response \u548c json \u6570\u636e，\u56e0\u4e3a fetch \u8fd4\u56de\u7684\u662f\u4e00\u4e2a Promise \u5b9e\u4f8b\u5bf9\u8c61，\u4e0d\u80fd\u76f4\u63a5\u53d6\u5230\u91cc\u9762\u7684\u6570\u636e\u3002\u800c\u4f7f\u7528 await \u5173\u952e\u5b57\u540e，\u5c31\u76f8\u5f53\u4e8e\u81ea\u52a8\u5e2e\u6211\u4eec\u8c03\u7528\u4e86 .then，\u628a Promise \u89e3\u6790\u540e\u7684\u6570\u636e\u76f4\u63a5\u8d4b\u503c\u7ed9\u53d8\u91cf\u3002\u6bd4\u5982\u7b2c\u4e00\u6b21\u7528 await fetch… \u83b7\u53d6\u54cd\u5e94\u5bf9\u8c61 response，\u7b2c\u4e8c\u6b21\u518d\u7528 await response.json() \u628a JSON \u6570\u636e\u89e3\u6790\u6210 JS \u5bf9\u8c61\u3002<\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u7531\u4e8e await \u662f\u540c\u6b65\u8bed\u6cd5\u98ce\u683c，\u6211\u4eec\u5c31\u4e0d\u80fd\u518d\u7528 .catch \u6765\u6355\u83b7\u9519\u8bef，\u800c\u9700\u8981\u4f7f\u7528 try catch finally \u6765\u6355\u83b7\u5f02\u5e38，\u6bd4\u5982 throw \u629b\u51fa\u7684\u9519\u8bef\u624d\u80fd\u5728 catch \u4e2d\u5904\u7406\u3002\u9700\u8981\u6ce8\u610f\u7684\u662f：\u53ea\u6709\u5728 async \u58f0\u660e\u7684\u51fd\u6570\u4e2d\u624d\u80fd\u4f7f\u7528 await\u3002<\/p>\n

4.\u5220\u9664\u6570\u636e<\/h2>\n

import React, { } from 'react';
\nimport StuContext from '.\/store\/StuContext';
\nimport StudentForm from '.\/StudentForm';
\nconst Student = (props) => {
\n const Stx = React.useContext(StuContext)
\n const [loading, setLoading] = React.useState(false)
\n const [error, setError] = React.useState(null)
\n const [isEdit, setIsEdit] = React.useState(null)
\n const deleteData = React.useCallback(async () => {
\n try {
\n setLoading(true)
\n setError(null)<\/p>\n

const res = await fetch(http:\/\/localhost:1337\/api\/students\/${props.stu.documentId}, {
\n method: 'delete'
\n })
\n if (!res.ok) {
\n throw new Error('\u5220\u9664\u5931\u8d25')
\n }
\n \/\/\u4fee\u6539\u6210\u529f\u540e\u89e6\u53d1\u5217\u8868\u91cd\u65b0\u5237\u65b0
\n Stx.fetchData()
\n \/\/ const data = await res.json()
\n \/\/ console.log('data', data)
\n \/\/ \u88ab\u5220\u9664\u7684\u5b66\u751f
\n } catch (e) {
\n console.log(e);
\n setError(e)
\n } finally {
\n setLoading(false)
\n }
\n }, [])<\/p>\n

const Delete = () => {
\n \/\/\u5220\u9664\u5b66\u751f
\n deleteData()
\n }<\/p>\n

const cancel = () => {
\n setIsEdit(false)
\n }<\/p>\n

return (
\n <>
\n {!isEdit &&
\n <tr>
\n <td>{props.stu.name}<\/td>
\n <td>{props.stu.gender}<\/td>
\n <td>{props.stu.age}<\/td>
\n <td>{props.stu.address}<\/td>
\n <td>
\n <button onClick={Delete} >\u5220\u9664<\/button>
\n <\/td>
\n <td>
\n <button onClick={() => { setIsEdit(true) }} >\u4fee\u6539<\/button>
\n <\/td>
\n <\/tr>
\n }
\n {
\n isEdit && <StudentForm stu={props.stu} onCancel={cancel} \/>
\n }
\n {
\n loading && <tr><td colSpan={5}>\u6b63\u5728\u5220\u9664\u6570\u636e<\/td><\/tr>
\n }
\n {
\n error && <tr><td colSpan={5}>\u5220\u9664\u5931\u8d25<\/td><\/tr>
\n }
\n <\/><\/p>\n

);
\n};<\/p>\n

export default Student;<\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u8fd9\u662f\u6211\u4eec\u7684\u5220\u9664\u8bf7\u6c42，\u6211\u4eec\u53ea\u9700\u8981\u5728\u540e\u9762\u7684\u5bf9\u8c61\u4e2d\u6307\u540d\u8bf7\u6c42\u5934\u4e3adelete\u5c31\u53ef\u4ee5\u53bb\u5220\u9664\u4e86\u3002\u5f53\u7136\u9700\u8981\u4e00\u4e2a\u53c2\u6570documentId\u53bb\u6307\u540d\u5220\u9664\u7684\u54ea\u4e00\u4e2a\u3002id\u4e0d\u884c\u5728\u8bf4\u4e00\u8fb9\u6211\u7528\u7684strapi\u4e0d\u652f\u6301id\u53bb\u6307\u5b9a\u5220\u9664\u6216\u8005\u66f4\u65b0\u7684\u8868\u4e2d\u7684\u5217\u3002\u5361\u4e86\u4e00\u5929\u4e86………….\u53ea\u4e0d\u8fc7\u4e00\u4e2a\u70b9\u662fContext\u6211\u4eec\u7528\u5230\u4e86，\u56e0\u4e3a\u6211\u4eec<\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"\"\u00a0<\/p>\n

\"\"\u00a0<\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u6bcf\u6b21\u5728\u5220\u9664\u4e4b\u540e\u9700\u8981\u91cd\u65b0\u52a0\u8f7d\u4e00\u904d\u6570\u636e，\u4fdd\u8bc1\u6700\u65b0\u7684\u6570\u636e\u5728 \u9875\u9762\u4e0a\u3002<\/p>\n

<StuContext.Provider value={{ fetchData }}>
\n <div className="app">
\n <button onClick={() => { loadDataHandler() }}>\u52a0\u8f7d\u6570\u636e<\/button>
\n {(!loading && !error) && <StudentList stus={stuData} \/>}
\n {loading && <p>\u6570\u636e\u6b63\u5728\u52a0\u8f7d\u4e2d…<\/p>}
\n {error && <p>\u6570\u636e\u52a0\u8f7d\u5f02\u5e38！<\/p>}
\n <\/div>
\n <\/StuContext.Provider><\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u5c31\u662f\u8fd9\u6837\u7136\u540e\u6211\u4eec\u5728\u5220\u9664\u8bf7\u6c42\u6210\u529f\u4e4b\u540e，\u6267\u884c\u4e00\u4e0b\u91cd\u65b0\u52a0\u8f7d\u7684\u65b9\u6cd5\u5c31\u597d\u4e86\u3002<\/p>\n

5.\u521b\u5efa\u4ee5\u53ca\u66f4\u65b0\u8bf7\u6c42<\/h2>\n

import React from 'react'
\nimport '.\/StudentForm.css'
\nimport StuContext from '.\/store\/StuContext'
\nexport default function StudentForm(props) {
\n const Stx = React.useContext(StuContext)
\n const [input, setInput] = React.useState({
\n name: props.stu ? props.stu.name : '', age: props.stu ? props.stu.age : '',
\n address: props.stu ? props.stu.address : '', gender: props.stu ? props.stu.gender : '\u7537'
\n })
\n const [loading, setLoading] = React.useState(false)
\n const [err, setErr] = React.useState(null)
\n const addData = (async (input) => {
\n try {
\n setLoading(true)
\n setErr(null)
\n const res = await fetch('http:\/\/localhost:1337\/api\/students', {
\n method: 'post',
\n body: JSON.stringify({
\n data: input
\n }),
\n headers: {
\n 'Content-Type': 'application\/json'
\n }
\n })
\n console.log('res.ok', res.ok)
\n if (!res.ok) {
\n throw new Error('\u6dfb\u52a0\u5931\u8d25')
\n }
\n \/\/\u6dfb\u52a0\u6210\u529f\u5237\u65b0\u5217\u8868
\n Stx.fetchData()<\/p>\n

} catch (e) {
\n console.log(e);<\/p>\n

setErr(e)
\n } finally {
\n setLoading(false)
\n }
\n })
\n const updataData = (async (newStu, id) => {
\n try {
\n setErr(null)
\n setLoading(true)
\n const res = await fetch(http:\/\/localhost:1337\/api\/students\/${id}, {
\n method: 'PUT',
\n body: JSON.stringify({ data: newStu }),
\n headers: {
\n 'Content-Type': 'application\/json'
\n }
\n })
\n if (!res.ok) {
\n throw new Error('\u4fee\u6539\u51fa\u9519')
\n }
\n Stx.fetchData()
\n } catch (e) {
\n setErr(e)
\n } finally {
\n setLoading(false)
\n }
\n })
\n const nameChange = (e) => {
\n setInput((preState) => ({ …preState, name: e.target.value }))
\n }
\n const ageChange = (e) => {
\n setInput((preState) => ({ …preState, age: +e.target.value }))
\n }
\n const genderChange = (e) => {
\n setInput((preState) => ({ …preState, gender: e.target.value }))
\n }
\n const addressChange = (e) => {
\n setInput((preState) => ({ …preState, address: e.target.value }))
\n }
\n const handle = () => {
\n addData(input)
\n }
\n const updataHandle = () => {
\n updataData(input, props.stu.documentId)
\n }
\n return (<\/p>\n

<><\/p>\n

<tr className='student-form'>
\n <td><input type="text" onChange={nameChange} value={input.name} \/><\/td>
\n <td><select name="" id="" onChange={genderChange} value={input.gender}>
\n <option value="\u7537">\u7537<\/option>
\n <option value="\u5973">\u5973<\/option>
\n <\/select><\/td>
\n <td><input type="text" onChange={ageChange} value={input.age} \/><\/td>
\n <td><input type="text" onChange={addressChange} value={input.address} \/><\/td><\/p>\n

<td>
\n {props.stu && <><button onClick={() => { props.onCancel() }}>\u53d6\u6d88<\/button><button onClick={updataHandle}>\u4fee\u6539<\/button><\/>}
\n {!props.stu && <button onClick={handle}>\u6dfb\u52a0<\/button>}<\/p>\n

<\/td>
\n <\/tr>
\n {loading && <tr><td colSpan={5}>\u6dfb\u52a0\u4e2d<\/td><\/tr>}
\n {err && <tr><td colSpan={5}>\u6dfb\u52a0\u5931\u8d25<\/td><\/tr>}
\n <\/>
\n )
\n}<\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u552f\u4e00\u4e0d\u540c\u7684\u662f\u6211\u4eec\u5728\u6267\u884c\u521b\u5efa\u6216\u8005\u66f4\u65b0\u8bf7\u6c42\u9664\u4e86\u8bf7\u6c42\u5934\u4e0d\u540c\u4ee5\u5916，\u521b\u5efa\u4e5f\u5c31\u662f\u6dfb\u52a0\u65b0\u8868\u5143\u7d20\u9700\u8981\u4f20\u4e00\u4e2ajson\u683c\u5f0f\u7684\u6587\u672c\u5185\u5bb9，\u4e5f\u5c31\u662f\u6211\u4eec\u9700\u8981\u628ajs\u5bf9\u8c61\u8f6c\u5316\u6210json\u683c\u5f0f\u3002\u6b63\u597d\u5bf9\u5e94\u6211\u4eec\u54cd\u5e94\u4f53json\u683c\u5f0f\u9700\u8981\u8f6c\u5316\u6210js\u5bf9\u8c61\u6211\u4eec\u7528\u3002\u4ee5\u53ca\u6307\u660e\u8bf7\u6c42\u4f53\u7684\u683c\u5f0f，headers：{\u201cContent-Type:'application\/json'\u201d}\u8bf4\u660e\u6211\u4eec\u4f20\u8fc7\u53bb\u7684\u662fjson\u683c\u5f0f\u3002\u5305\u62ec\u66f4\u65b0，\u6bd5\u7adf\u6211\u4eec\u662f\u4f20\u8fc7\u53bb\u6570\u636e\u800c\u4e0d\u662fget\u83b7\u53d6\u6570\u636e\u3002\u8fd9\u4e00\u70b9\u8981\u6ce8\u610f\u3002\u597d\u4e86\u73b0\u5728\u6211\u4eec\u7528fetch\u5b9e\u73b0\u4e86post \u589e delete\u5220 put \u6539 get\u67e5\u4e86\u3002\u867d\u7136\u4e0d\u719f\u7ec3\u4f46\u81f3\u5c11\u6709\u4e2a\u601d\u8def\u600e\u4e48\u53bb\u6570\u636e\u5e93\u62ff\u4e1c\u897f\u4e86\u3002\u81f3\u4e8e\u4f18\u5316\u8fd8\u662f\u6162\u6162\u6765\u5427\u3002<\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/p>\n

\u00a0<\/p><\/p>\n","protected":false},"excerpt":{"rendered":"

\u6587\u7ae0\u6d4f\u89c8\u9605\u8bfb900\u6b21\uff0c\u70b9\u8d5e34\u6b21\uff0c\u6536\u85cf31\u6b21\u3002\u672c\u6587\u4ecb\u7ecd\u4e86\u4f7f\u7528Strapi\u6784\u5efaAPI\u7ba1\u7406\u7cfb\u7edf\u548cReact\u524d\u7aef\u901a\u8fc7fetch\u5b9e\u73b0CRUD\u64cd\u4f5c\u7684\u6280\u672f\u65b9\u6848\uff1a Strapi\u642d\u5efa\uff1a\u901a\u8fc7npx create-strapi\u5feb\u901f\u521b\u5efa\u53ef\u89c6\u5316API\u7ba1\u7406\u7cfb\u7edf\uff0c\u652f\u6301\u7f51\u9875\u7aef\u5b9a\u4e49\u6570\u636e\u6a21\u578b\u548c\u6743\u9650\u8bbe\u7f6e\uff1b \u73af\u5883\u914d\u7f6e\uff1a\u4f7f\u7528nvm\u7ba1\u7406Node.js\u7248\u672c\uff0c\u786e\u4fdd\u517c\u5bb9\u6027\uff1b fetch\u8bf7\u6c42\uff1a\u8be6\u7ec6\u6f14\u793a\u4e86GET\u8bf7\u6c42\u83b7\u53d6\u5b66\u751f\u6570\u636e\u7684\u8fc7\u7a0b\uff0c\u5305\u62ec\u54cd\u5e94\u5904\u7406\u3001\u9519\u8bef\u6355\u83b7\u548c\u72b6\u6001\u7ba1\u7406\uff1b \u5f02\u6b65\u4f18\u5316\uff1a\u5bf9\u6bd4.then\u94fe\u5f0f\u8c03\u7528\u548casync\/await\u8bed\u6cd5\u7cd6\u4e24\u79cd\u5f02\u6b65\u5904\u7406\u65b9\u5f0f\uff1b \u5b8c\u6574CRUD\uff1a\u5b9e\u73b0POST\u521b\u5efa\u3001DELETE\u5220\u9664\u3001PU_fetch \u540c\u6b65\u8bf7\u6c42<\/p>\n","protected":false},"author":2,"featured_media":45948,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[524,87,43,44],"topic":[],"class_list":["post-45958","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-server","tag-react-js","tag-87","tag-43","tag-44"],"yoast_head":"\n\u5feb\u901f\u642d\u5efa\u670d\u52a1\u5668\uff0cfetch\u8bf7\u6c42\u4ece\u670d\u52a1\u5668\u83b7\u53d6\u6570\u636e - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wsisp.com\/helps\/45958.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u5feb\u901f\u642d\u5efa\u670d\u52a1\u5668\uff0cfetch\u8bf7\u6c42\u4ece\u670d\u52a1\u5668\u83b7\u53d6\u6570\u636e - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"\u6587\u7ae0\u6d4f\u89c8\u9605\u8bfb900\u6b21\uff0c\u70b9\u8d5e34\u6b21\uff0c\u6536\u85cf31\u6b21\u3002\u672c\u6587\u4ecb\u7ecd\u4e86\u4f7f\u7528Strapi\u6784\u5efaAPI\u7ba1\u7406\u7cfb\u7edf\u548cReact\u524d\u7aef\u901a\u8fc7fetch\u5b9e\u73b0CRUD\u64cd\u4f5c\u7684\u6280\u672f\u65b9\u6848\uff1a Strapi\u642d\u5efa\uff1a\u901a\u8fc7npx create-strapi\u5feb\u901f\u521b\u5efa\u53ef\u89c6\u5316API\u7ba1\u7406\u7cfb\u7edf\uff0c\u652f\u6301\u7f51\u9875\u7aef\u5b9a\u4e49\u6570\u636e\u6a21\u578b\u548c\u6743\u9650\u8bbe\u7f6e\uff1b \u73af\u5883\u914d\u7f6e\uff1a\u4f7f\u7528nvm\u7ba1\u7406Node.js\u7248\u672c\uff0c\u786e\u4fdd\u517c\u5bb9\u6027\uff1b fetch\u8bf7\u6c42\uff1a\u8be6\u7ec6\u6f14\u793a\u4e86GET\u8bf7\u6c42\u83b7\u53d6\u5b66\u751f\u6570\u636e\u7684\u8fc7\u7a0b\uff0c\u5305\u62ec\u54cd\u5e94\u5904\u7406\u3001\u9519\u8bef\u6355\u83b7\u548c\u72b6\u6001\u7ba1\u7406\uff1b \u5f02\u6b65\u4f18\u5316\uff1a\u5bf9\u6bd4.then\u94fe\u5f0f\u8c03\u7528\u548casync\/await\u8bed\u6cd5\u7cd6\u4e24\u79cd\u5f02\u6b65\u5904\u7406\u65b9\u5f0f\uff1b \u5b8c\u6574CRUD\uff1a\u5b9e\u73b0POST\u521b\u5efa\u3001DELETE\u5220\u9664\u3001PU_fetch \u540c\u6b65\u8bf7\u6c42\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/45958.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-29T18:01:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2025\/07\/20250729180112-68890c68a8caf.png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/45958.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/45958.html\",\"name\":\"\u5feb\u901f\u642d\u5efa\u670d\u52a1\u5668\uff0cfetch\u8bf7\u6c42\u4ece\u670d\u52a1\u5668\u83b7\u53d6\u6570\u636e - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2025-07-29T18:01:15+00:00\",\"dateModified\":\"2025-07-29T18:01:15+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/45958.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/45958.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/45958.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u5feb\u901f\u642d\u5efa\u670d\u52a1\u5668\uff0cfetch\u8bf7\u6c42\u4ece\u670d\u52a1\u5668\u83b7\u53d6\u6570\u636e\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\",\"url\":\"https:\/\/www.wsisp.com\/helps\/\",\"name\":\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"description\":\"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"contentUrl\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/wp.wsisp.com\"],\"url\":\"https:\/\/www.wsisp.com\/helps\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u5feb\u901f\u642d\u5efa\u670d\u52a1\u5668\uff0cfetch\u8bf7\u6c42\u4ece\u670d\u52a1\u5668\u83b7\u53d6\u6570\u636e - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wsisp.com\/helps\/45958.html","og_locale":"zh_CN","og_type":"article","og_title":"\u5feb\u901f\u642d\u5efa\u670d\u52a1\u5668\uff0cfetch\u8bf7\u6c42\u4ece\u670d\u52a1\u5668\u83b7\u53d6\u6570\u636e - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"\u6587\u7ae0\u6d4f\u89c8\u9605\u8bfb900\u6b21\uff0c\u70b9\u8d5e34\u6b21\uff0c\u6536\u85cf31\u6b21\u3002\u672c\u6587\u4ecb\u7ecd\u4e86\u4f7f\u7528Strapi\u6784\u5efaAPI\u7ba1\u7406\u7cfb\u7edf\u548cReact\u524d\u7aef\u901a\u8fc7fetch\u5b9e\u73b0CRUD\u64cd\u4f5c\u7684\u6280\u672f\u65b9\u6848\uff1a Strapi\u642d\u5efa\uff1a\u901a\u8fc7npx create-strapi\u5feb\u901f\u521b\u5efa\u53ef\u89c6\u5316API\u7ba1\u7406\u7cfb\u7edf\uff0c\u652f\u6301\u7f51\u9875\u7aef\u5b9a\u4e49\u6570\u636e\u6a21\u578b\u548c\u6743\u9650\u8bbe\u7f6e\uff1b \u73af\u5883\u914d\u7f6e\uff1a\u4f7f\u7528nvm\u7ba1\u7406Node.js\u7248\u672c\uff0c\u786e\u4fdd\u517c\u5bb9\u6027\uff1b fetch\u8bf7\u6c42\uff1a\u8be6\u7ec6\u6f14\u793a\u4e86GET\u8bf7\u6c42\u83b7\u53d6\u5b66\u751f\u6570\u636e\u7684\u8fc7\u7a0b\uff0c\u5305\u62ec\u54cd\u5e94\u5904\u7406\u3001\u9519\u8bef\u6355\u83b7\u548c\u72b6\u6001\u7ba1\u7406\uff1b \u5f02\u6b65\u4f18\u5316\uff1a\u5bf9\u6bd4.then\u94fe\u5f0f\u8c03\u7528\u548casync\/await\u8bed\u6cd5\u7cd6\u4e24\u79cd\u5f02\u6b65\u5904\u7406\u65b9\u5f0f\uff1b \u5b8c\u6574CRUD\uff1a\u5b9e\u73b0POST\u521b\u5efa\u3001DELETE\u5220\u9664\u3001PU_fetch \u540c\u6b65\u8bf7\u6c42","og_url":"https:\/\/www.wsisp.com\/helps\/45958.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2025-07-29T18:01:15+00:00","og_image":[{"url":"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2025\/07\/20250729180112-68890c68a8caf.png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"7 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/45958.html","url":"https:\/\/www.wsisp.com\/helps\/45958.html","name":"\u5feb\u901f\u642d\u5efa\u670d\u52a1\u5668\uff0cfetch\u8bf7\u6c42\u4ece\u670d\u52a1\u5668\u83b7\u53d6\u6570\u636e - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2025-07-29T18:01:15+00:00","dateModified":"2025-07-29T18:01:15+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/45958.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/45958.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/45958.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"\u5feb\u901f\u642d\u5efa\u670d\u52a1\u5668\uff0cfetch\u8bf7\u6c42\u4ece\u670d\u52a1\u5668\u83b7\u53d6\u6570\u636e"}]},{"@type":"WebSite","@id":"https:\/\/www.wsisp.com\/helps\/#website","url":"https:\/\/www.wsisp.com\/helps\/","name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","description":"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41","name":"admin","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/","url":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","contentUrl":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","caption":"admin"},"sameAs":["http:\/\/wp.wsisp.com"],"url":"https:\/\/www.wsisp.com\/helps\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/45958","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/comments?post=45958"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/45958\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media\/45948"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=45958"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=45958"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=45958"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=45958"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}