docs: add solid docs

Author: JOU-amjs

.prettierrc.cjs

@@ -0,0 +1,43 @@
+module.exports = {
+  // newline string threshold
+  printWidth: 96,
+
+  // Set the number of spaces for each horizontal indentation of the tool
+  tabWidth: 2,
+
+  // Whether to use tab indentation
+  useTabs: false,
+
+  // Whether to add a semicolon at the end of the sentence
+  semi: true,
+
+  // use single quotes
+  singleQuote: true,
+
+  // The last object element character plus a comma
+  trailingComma: 'none',
+
+  // Whether there is a space between the curly braces of the object literal
+  bracketSpacing: true,
+
+  // jsx > Whether to take another line
+  bracketSameLine: true,
+
+  // No need to automatically add @prettier at the beginning of the file
+  insertPragma: false,
+
+  // use lf for line breaks
+  endOfLine: 'lf',
+
+  // Whether the curly braces of the object literal should start on a new line
+  bracketSameLine: true,
+
+  // Whether the arrow function parameters use parentheses
+  arrowParens: 'avoid',
+
+  // Indentation of script and style tags in vue files
+  vueIndentScriptAndStyle: false,
+
+  // Whether a single attribute is on a separate line
+  singleAttributePerLine: true
+};

.prettierrc.js

@@ -0,0 +1,9 @@
+import { createAlova } from 'alova';
+import adapterFetch from 'alova/fetch';
+import SolidHook from 'alova/solid';
+export const alovaInstance = createAlova({
+  baseURL: 'https://jsonplaceholder.typicode.com',
+  statesHook: SolidHook,
+  requestAdapter: adapterFetch(),
+  responded: response => response.json()
+});

codesandbox@3/00-create-alova/solid.js

@@ -3,16 +3,15 @@ import { alovaInstance } from './api';
 
 const App = () => {
   // Use the alova instance to create a method and pass it to useRequest to send a request
-  const { loading, data, error, send, update, onSuccess } = useRequest(
+  const { loading, data, error, send, update } = useRequest(
     alovaInstance.Get('/todos/1', {
       cacheFor: 0
     }),
     {
       initialData: {}, // Set the initial data of the data state
       immediate: true // Whether to send the request immediately, the default is true
     }
-  );
-  onSuccess(event => {
+  ).onSuccess(event => {
     event.method; //The method of the current request
     event.data; //Response data of the current request
   });

codesandbox@3/01-getting-started/07-combine-framework/react-useRequest.en.jsx

@@ -3,16 +3,15 @@ import { alovaInstance } from './api';
 
 const App = () => {
   // 使用alova实例创建method并传给useRequest即可发送请求
-  const { loading, data, error, send, update, onSuccess } = useRequest(
+  const { loading, data, error, send, update } = useRequest(
     alovaInstance.Get('/todos/1', {
       cacheFor: 0
     }),
     {
       initialData: {}, // 设置data状态的初始数据
       immediate: true // 是否立即发送请求，默认为true
     }
-  );
-  onSuccess(event => {
+  ).onSuccess(event => {
     event.method; // 当前请求的method
     event.data; // 当前请求的响应数据
   });

codesandbox@3/01-getting-started/07-combine-framework/react-useRequest.zh.jsx

@@ -0,0 +1,44 @@
+import { useRequest } from 'alova/client';
+import { alovaInstance } from './api';
+
+const App = () => {
+  // Use the alova instance to create a method and pass it to useRequest to send a request
+  const { loading, data, error, send, update } = useRequest(
+    alovaInstance.Get('/todos/1', {
+      cacheFor: 0
+    }),
+    {
+      initialData: {}, // Set the initial data of the data state
+      immediate: true // Whether to send the request immediately, the default is true
+    }
+  ).onSuccess(event => {
+    event.method; //The method of the current request
+    event.data; //Response data of the current request
+  });
+
+  const handleSend = () => {
+    send();
+  };
+  const handleUpdate = () => {
+    update({
+      data: { title: 'new title' }
+    });
+  };
+
+  return (
+    <>
+      {loading() ? (
+        <div>Loading...</div>
+      ) : error() ? (
+        <div>{error().message}</div>
+      ) : (
+        <div>
+          <div>Request result: {JSON.stringify(data)}</div>
+          <button onClick={handleSend}>Manually send request</button>
+          <button onClick={handleUpdate}>Manually modify data</button>
+        </div>
+      )}
+    </>
+  );
+};
+export default App;

codesandbox@3/01-getting-started/07-combine-framework/solid-useRequest.en.jsx

@@ -0,0 +1,44 @@
+import { useRequest } from 'alova/client';
+import { alovaInstance } from './api';
+
+const App = () => {
+  // 使用alova实例创建method并传给useRequest即可发送请求
+  const { loading, data, error, send, update } = useRequest(
+    alovaInstance.Get('/todos/1', {
+      cacheFor: 0
+    }),
+    {
+      initialData: {}, // 设置data状态的初始数据
+      immediate: true // 是否立即发送请求，默认为true
+    }
+  ).onSuccess(event => {
+    event.method; // 当前请求的method
+    event.data; // 当前请求的响应数据
+  });
+
+  const handleSend = () => {
+    send();
+  };
+  const handleUpdate = () => {
+    update({
+      data: { title: 'new title' }
+    });
+  };
+
+  return (
+    <>
+      {loading() ? (
+        <div>Loading...</div>
+      ) : error() ? (
+        <div>{error().message}</div>
+      ) : (
+        <div>
+          <div>请求结果: {JSON.stringify(data)}</div>
+          <button onClick={handleSend}>手动发送请求</button>
+          <button onClick={handleUpdate}>手动修改data</button>
+        </div>
+      )}
+    </>
+  );
+};
+export default App;

codesandbox@3/01-getting-started/07-combine-framework/solid-useRequest.zh.jsx

@@ -3,16 +3,15 @@
   import { alovaInstance } from './api';
 
   // Use the alova instance to create a method and pass it to useRequest to send a request
-  const { loading, data, error, send, update, onSuccess } = useRequest(
+  const { loading, data, error, send, update } = useRequest(
     alovaInstance.Get('/todos/1', {
       cacheFor: 0
     }),
     {
       initialData: {}, // Set the initial data of the data state
       immediate: true // Whether to send the request immediately, the default is true
     }
-  );
-  onSuccess(event => {
+  ).onSuccess(event => {
     event.method; //The method of the current request
     event.data; //Response data of the current request
   });

codesandbox@3/01-getting-started/07-combine-framework/svelte-useRequest.en.svelte

@@ -3,16 +3,15 @@ import { useRequest } from 'alova/client';
 import { alovaInstance } from './api';
 
 // 使用alova实例创建method并传给useRequest即可发送请求
-const { loading, data, error, send, update, onSuccess } = useRequest(
+const { loading, data, error, send, update } = useRequest(
   alovaInstance.Get('/todos/1', {
     cacheFor: 0
   }),
   {
     initialData: {}, // 设置data状态的初始数据
     immediate: true // 是否立即发送请求，默认为true
   }
-);
-onSuccess(event => {
+).onSuccess(event => {
   event.method; // 当前请求的method
   event.data; // 当前请求的响应数据
 });

codesandbox@3/01-getting-started/07-combine-framework/svelte-useRequest.zh.svelte

@@ -13,16 +13,15 @@ import { useRequest } from 'alova/client';
 import { alovaInstance } from './api';
 
 // Use the alova instance to create a method and pass it to useRequest to send a request
-const { loading, data, error, send, update, onSuccess } = useRequest(
+const { loading, data, error, send, update } = useRequest(
   alovaInstance.Get('/todos/1', {
     cacheFor: 0
   }),
   {
     initialData: {}, // Set the initial data of the data state
     immediate: true // Whether to send a request immediately, the default is true
   }
-);
-onSuccess(event => {
+).onSuccess(event => {
   event.method; //The method of the current request
   event.data; //Response data of the current request
 });