[{"data":1,"prerenderedAt":411},["ShallowReactive",2],{"page-\u002Fvue\u002Faxios":3},{"id":4,"title":5,"body":6,"description":15,"extension":404,"meta":405,"navigation":406,"path":407,"seo":408,"stem":409,"__hash__":410},"content\u002FVue\u002Faxios.md","Axios",{"type":7,"value":8,"toc":398},"minimark",[9,151,155,160,176,179,185,268,275,281,344,350,394],[10,11,16],"pre",{"className":12,"code":13,"language":14,"meta":15,"style":15},"language-ts shiki shiki-themes github-light github-dark","const sum = ref(0)\nconst dogList = reactive(['https:\u002F\u002Fimages.dog.ceo\u002Fbreeds\u002Fpembroke\u002Fn02113023_6269.jpg'])\n\u002F\u002F 方法：改变 sum 值\nasync function change() {\n  const result = await axios.get('https:\u002F\u002Fdog.ceo\u002Fapi\u002Fbreed\u002Fpembroke\u002Fimages\u002Frandom')\n  console.log(result.data)\n  dogList.push(result.data.message)\n}\n\n","ts","",[17,18,19,49,72,79,94,121,133,145],"code",{"__ignoreMap":15},[20,21,24,28,32,35,39,43,46],"span",{"class":22,"line":23},"line",1,[20,25,27],{"class":26},"szBVR","const",[20,29,31],{"class":30},"sj4cs"," sum",[20,33,34],{"class":26}," =",[20,36,38],{"class":37},"sScJk"," ref",[20,40,42],{"class":41},"sVt8B","(",[20,44,45],{"class":30},"0",[20,47,48],{"class":41},")\n",[20,50,52,54,57,59,62,65,69],{"class":22,"line":51},2,[20,53,27],{"class":26},[20,55,56],{"class":30}," dogList",[20,58,34],{"class":26},[20,60,61],{"class":37}," reactive",[20,63,64],{"class":41},"([",[20,66,68],{"class":67},"sZZnC","'https:\u002F\u002Fimages.dog.ceo\u002Fbreeds\u002Fpembroke\u002Fn02113023_6269.jpg'",[20,70,71],{"class":41},"])\n",[20,73,75],{"class":22,"line":74},3,[20,76,78],{"class":77},"sJ8bj","\u002F\u002F 方法：改变 sum 值\n",[20,80,82,85,88,91],{"class":22,"line":81},4,[20,83,84],{"class":26},"async",[20,86,87],{"class":26}," function",[20,89,90],{"class":37}," change",[20,92,93],{"class":41},"() {\n",[20,95,97,100,103,105,108,111,114,116,119],{"class":22,"line":96},5,[20,98,99],{"class":26},"  const",[20,101,102],{"class":30}," result",[20,104,34],{"class":26},[20,106,107],{"class":26}," await",[20,109,110],{"class":41}," axios.",[20,112,113],{"class":37},"get",[20,115,42],{"class":41},[20,117,118],{"class":67},"'https:\u002F\u002Fdog.ceo\u002Fapi\u002Fbreed\u002Fpembroke\u002Fimages\u002Frandom'",[20,120,48],{"class":41},[20,122,124,127,130],{"class":22,"line":123},6,[20,125,126],{"class":41},"  console.",[20,128,129],{"class":37},"log",[20,131,132],{"class":41},"(result.data)\n",[20,134,136,139,142],{"class":22,"line":135},7,[20,137,138],{"class":41},"  dogList.",[20,140,141],{"class":37},"push",[20,143,144],{"class":41},"(result.data.message)\n",[20,146,148],{"class":22,"line":147},8,[20,149,150],{"class":41},"}\n",[152,153,154],"p",{},"以上可以完成一个简单的get请求",[156,157,159],"h2",{"id":158},"rest-api","Rest API",[152,161,162,163,167,168,171,172,175],{},"​\tREST 是 ",[164,165,166],"strong",{},"\"Representational State Transfer\""," 的缩写，中文翻译为“表述性状态转移”。它是一种用于构建 ",[164,169,170],{},"Web 服务"," 的架构风格，由 Roy Fielding 在他的博士论文中首次提出。REST API 是基于 REST 架构风格设计的 ",[164,173,174],{},"应用程序接口（API）","，它允许客户端和服务器通过 HTTP 协议进行通信。REST API 的核心思想是将系统中的资源（如用户、文章、商品等）通过 URL 表示，并使用标准的 HTTP 方法（如 GET、POST、PUT、DELETE）对这些资源进行操作。",[156,177,178],{"id":178},"客户端封装",[180,181,183],"h4",{"id":182},"封装好的客户端的作用",[164,184,182],{},[186,187,188,237,258],"ol",{},[189,190,191,194,195],"li",{},[164,192,193],{},"简化 API 调用","：",[196,197,198],"ul",{},[189,199,200,201,233,236],{},"开发者无需手动构建 HTTP 请求（如设置 URL、请求头、处理响应等），只需调用封装好的方法即可。例如：",[10,202,206],{"className":203,"code":204,"language":205,"meta":15,"style":15},"language-javascript shiki shiki-themes github-light github-dark","const articles = await $strapi.find('articles');\n","javascript",[17,207,208],{"__ignoreMap":15},[20,209,210,212,215,217,219,222,225,227,230],{"class":22,"line":23},[20,211,27],{"class":26},[20,213,214],{"class":30}," articles",[20,216,34],{"class":26},[20,218,107],{"class":26},[20,220,221],{"class":41}," $strapi.",[20,223,224],{"class":37},"find",[20,226,42],{"class":41},[20,228,229],{"class":67},"'articles'",[20,231,232],{"class":41},");\n",[234,235],"br",{},"这比手动使用fetch或axios更加简洁。",[189,238,239,194,242],{},[164,240,241],{},"内置功能",[196,243,244],{},[189,245,246,247],{},"封装好的客户端通常会内置一些常用功能，例如：\n",[196,248,249,252,255],{},[189,250,251],{},"自动处理认证（如附加 Token 到请求头）。",[189,253,254],{},"自动解析响应数据。",[189,256,257],{},"提供错误处理机制。",[189,259,260,194,263],{},[164,261,262],{},"提高开发效率",[196,264,265],{},[189,266,267],{},"开发者可以专注于业务逻辑，而无需关心底层的 API 调用细节。",[269,270,272],"h3",{"id":271},"strapi-和-pinia-的区别",[164,273,274],{},"Strapi 和 Pinia 的区别",[180,276,278],{"id":277},"_1-strapi-是一个后端-cms内容管理系统",[164,279,280],{},"1. Strapi 是一个后端 CMS（内容管理系统）",[196,282,283,312,328],{},[189,284,285,288,289],{},[164,286,287],{},"作用","：\n",[196,290,291,298,301],{},[189,292,293,294,297],{},"Strapi 是一个 ",[164,295,296],{},"Headless CMS","，用于管理和存储内容（如文章、用户、商品等）。",[189,299,300],{},"它提供了 REST API 或 GraphQL API，前端可以通过这些 API 获取或操作后端的数据。",[189,302,303,304,307,308,311],{},"Strapi 的主要职责是",[164,305,306],{},"作为后端服务","，处理",[164,309,310],{},"数据存储、验证、权限管理","等。",[189,313,314,288,317],{},[164,315,316],{},"使用场景",[196,318,319,322,325],{},[189,320,321],{},"你需要一个后端来存储和管理数据。",[189,323,324],{},"你需要通过 API 将数据提供给前端应用（如 Vue.js、React、Angular 等）。",[189,326,327],{},"例如：构建博客、电子商务网站、内容管理平台等。",[189,329,330,288,333],{},[164,331,332],{},"特点",[196,334,335,338,341],{},[189,336,337],{},"基于 Node.js，支持自定义扩展。",[189,339,340],{},"提供直观的管理界面，方便非技术人员管理内容。",[189,342,343],{},"支持用户认证和权限管理。",[180,345,347],{"id":346},"_2-pinia-是一个前端状态管理工具",[164,348,349],{},"2. Pinia 是一个前端状态管理工具",[196,351,352,364,379],{},[189,353,354,288,356],{},[164,355,287],{},[196,357,358,361],{},[189,359,360],{},"Pinia 是 Vue.js 的状态管理库，用于在前端应用中管理组件之间共享的状态。",[189,362,363],{},"它的主要职责是存储和管理前端的状态（如用户登录信息、购物车数据等），并在组件之间实现状态共享和通信。",[189,365,366,288,368],{},[164,367,316],{},[196,369,370,373,376],{},[189,371,372],{},"你需要在多个组件之间共享数据。",[189,374,375],{},"你需要管理前端的状态（如用户登录状态、主题设置、购物车内容等）。",[189,377,378],{},"例如：在一个电商网站中，购物车数据需要在多个页面之间共享。",[189,380,381,288,383],{},[164,382,332],{},[196,384,385,388,391],{},[189,386,387],{},"轻量、简单，专为 Vue.js 设计。",[189,389,390],{},"支持响应式数据和模块化设计。",[189,392,393],{},"可以与 Vue DevTools 集成，方便调试。",[395,396,397],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":15,"searchDepth":51,"depth":51,"links":399},[400,401],{"id":158,"depth":51,"text":159},{"id":178,"depth":51,"text":178,"children":402},[403],{"id":271,"depth":74,"text":274},"md",{},true,"\u002Fvue\u002Faxios",{"description":15},"Vue\u002Faxios","jD7JrPqyG3iDPOwZ7sEzS9GGbFOg48ZyXa9xZpxcMR0",1791042466946]