Skip to content

Commit

Permalink
Merge pull request #60 from Haoyue-zhi/patch-1
Browse files Browse the repository at this point in the history 
Update 05-uniapp.md
  • Loading branch information
@JOU-amjs
JOU-amjs authored Dec 28, 2024
2 parents 5287697 + e5bcaea commit 10b9d49
Show file tree
Hide file tree
Showing 16 changed files with 400 additions and 400 deletions.
64 changes: 32 additions & 32 deletions docs/resource/01-request-adapter/03-xhr.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,44 +71,44 @@ The XMLHttpRequest adapter provides basic configuration parameters, including `r
<TabItem value="1" label="vue">

```html
<tempate>
<div v-if="loading">Loading...</div>
<div>The request data is: {{ data }}</div>
<template>
<div v-if="loading">Loading...</div>
<div>The request data is: {{ data }}</div>
</template>

<script setup>
const list = () =>
alovaInst. Get('/list', {
/**
* Set the response data type
* Can be set to change the response type. Values are: "arraybuffer", "blob", "document", "json" and "text"
* defaults to "json"
*/
responseType: 'text',
const list = () =>
alovaInst.Get('/list', {
/**
* Set the response data type
* Can be set to change the response type. Values are: "arraybuffer", "blob", "document", "json" and "text"
* defaults to "json"
*/
responseType: 'text',
/**
* True when credentials are to be included in cross-origin requests. false when they are excluded from cross-origin requests and when cookies are ignored in their responses. Default is false
*/
withCredentials: true,
/**
* True when credentials are to be included in cross-origin requests. false when they are excluded from cross-origin requests and when cookies are ignored in their responses. Default is false
*/
withCredentials: true,
/**
* Set the mimeType of the response data
*/
mimeType: 'text/plain; charset=x-user-defined',
/**
* Set the mimeType of the response data
*/
mimeType: 'text/plain; charset=x-user-defined',
/**
* auth means use HTTP Basic authentication and provide credentials.
* This will set an `Authorization` header, overriding any existing
* Custom headers for `Authorization` set using `headers`.
* Note that only HTTP Basic authentication can be configured via this parameter.
* For Bearer tokens etc., use the `Authorization` custom header instead.
*/
auth: {
username: 'name1',
password: '123456'
}
});
const { loading, data } = useRequest(list);
/**
* auth means use HTTP Basic authentication and provide credentials.
* This will set an `Authorization` header, overriding any existing
* Custom headers for `Authorization` set using `headers`.
* Note that only HTTP Basic authentication can be configured via this parameter.
* For Bearer tokens etc., use the `Authorization` custom header instead.
*/
auth: {
username: 'name1',
password: '123456'
}
});
const { loading, data } = useRequest(list);
</script>
```

Expand Down
22 changes: 11 additions & 11 deletions docs/resource/01-request-adapter/04-axios.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,20 +65,20 @@ The usage of request is exactly the same as that used in the web environment. Al
<TabItem value="1" label="vue">

```html
<tempate>
<div v-if="loading">Loading...</div>
<div>The request data is: {{ data }}</div>
<template>
<div v-if="loading">Loading...</div>
<div>The request data is: {{ data }}</div>
</template>

<script setup>
const list = () =>
alovaInst.Get('/list', {
// The set parameters will be passed to axios
paramsSerializer: params => {
return Qs.stringify(params, { arrayFormat: 'brackets' });
}
});
const { loading, data } = useRequest(list);
const list = () =>
alovaInst.Get('/list', {
// The set parameters will be passed to axios
paramsSerializer: params => {
return Qs.stringify(params, { arrayFormat: 'brackets' });
}
});
const { loading, data } = useRequest(list);
</script>
```

Expand Down
150 changes: 75 additions & 75 deletions docs/resource/01-request-adapter/05-uniapp.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,19 +58,19 @@ const alovaInst = createAlova({
The usage method of the request is exactly the same as that used in the web environment. Already fully compatible with `uni.request`, you can specify [all configuration items] supported by `uni.request` in _config_ of method instance creation (https://uniapp.dcloud.net.cn/api/request/ request.html)

```html
<tempate>
<view v-if="loading">Loading...</view>
<view>The requested data is: {{ data }}</view>
<template>
<view v-if="loading">Loading...</view>
<view>The requested data is: {{ data }}</view>
</template>

<script setup>
const list = () =>
alovaInst.Get('/list', {
// The set parameters will be passed to uni.request
enableHttp2: true,
sslVerify: true
});
const { loading, data } = useRequest(list);
const list = () =>
alovaInst.Get('/list', {
// The set parameters will be passed to uni.request
enableHttp2: true,
sslVerify: true
});
const { loading, data } = useRequest(list);
</script>
```

Expand All @@ -93,46 +93,46 @@ When `requestType: 'upload'` is set in the _config_ of the method instance, it m
Similarly, it is fully compatible with `uni.uploadFile`, you can specify [all configuration items] supported by `uni.uploadFile` in _config_ of method instance creation (https://uniapp.dcloud.net.cn/api /request/network-file.html#uploadfile), if there are additional parameters to be set, please specify them in _config_ of the method instance.

```html
<tempate>
<view v-if="loading">Uploading...</view>
<view>Upload progress: {{ uploading.loaded }}/{{ uploading.total }}</view>
<button @click="handleImageChoose">Upload image</button>
<!-- ... -->
<template>
<view v-if="loading">Uploading...</view>
<view>Upload progress: {{ uploading.loaded }}/{{ uploading.total }}</view>
<button @click="handleImageChoose">Upload image</button>
<!-- ... -->
</template>

<script setup>
const uploadFile = (name, filePath, formData) =>
alovaInst. Post(
'/uploadImg',
{
name,
filePath,
// Additional data will be passed into formData of uni.uploadFile
...formData
},
{
// Set the request method to upload, and the adapter will call uni.uploadFile
requestType: 'upload',
fileType: 'image'
}
);
const { loading, data, uploading, send } = useRequest(uploadFile, {
immediate: false
});
const handleImageChoose = () => {
uni.chooseImage({
success: chooseImageRes => {
const tempFilePaths = chooseImageRes.tempFilePaths;
send('fileName', tempFilePaths[0], {
extra1: 'a',
extra2: 'b'
});
}
});
};
const uploadFile = (name, filePath, formData) =>
alovaInst.Post(
'/uploadImg',
{
name,
filePath,
// Additional data will be passed into formData of uni.uploadFile
...formData
},
{
// Set the request method to upload, and the adapter will call uni.uploadFile
requestType: 'upload',
fileType: 'image'
}
);
const { loading, data, uploading, send } = useRequest(uploadFile, {
immediate: false
});
const handleImageChoose = () => {
uni.chooseImage({
success: chooseImageRes => {
const tempFilePaths = chooseImageRes.tempFilePaths;
send('fileName', tempFilePaths[0], {
extra1: 'a',
extra2: 'b'
});
}
});
};
</script>
```

Expand All @@ -143,28 +143,28 @@ When `requestType: 'download'` is set in the _config_ of the method instance, it
Similarly, it is fully compatible with `uni.downloadFile`, you can specify [all configuration items] supported by `uni.downloadFile` in _config_ of method instance creation (https://uniapp.dcloud.net.cn/api /request/network-file.html#downloadfile), if there are additional parameters to be set, please specify them in _config_ of the method instance.

```html
<tempate>
<view v-if="loading">Downloading...</view>
<view>Download progress: {{ downloading.loaded }}/{{ downloading.total }}</view>
<button @click="handleImageDownload">Download image</button>
<!-- ... -->
<template>
<view v-if="loading">Downloading...</view>
<view>Download progress: {{ downloading.loaded }}/{{ downloading.total }}</view>
<button @click="handleImageDownload">Download image</button>
<!-- ... -->
</template>

<script setup>
const downloadFile = filePath =>
alovaInst.Get('/bigImage.jpg', {
// Set the request method to download, and the adapter will call uni.downloadFile
requestType: 'download',
filePath
});
const { loading, data, downloading, send } = useRequest(downloadFile, {
immediate: false
});
const handleImageDownload = () => {
send('file_save_path');
};
const downloadFile = filePath =>
alovaInst.Get('/bigImage.jpg', {
// Set the request method to download, and the adapter will call uni.downloadFile
requestType: 'download',
filePath
});
const { loading, data, downloading, send } = useRequest(downloadFile, {
immediate: false
});
const handleImageDownload = () => {
send('file_save_path');
};
</script>
```

Expand Down Expand Up @@ -266,14 +266,14 @@ In actual use, we usually need to process the response data globally. It is reco

```typescript
const alovaInst = createAlova({
baseURL: 'https://api.alovajs.org',
...AdapterUniapp(),
responded(response) {
const { statusCode, data } = response as UniNamespace.RequestSuccessCallbackResult;
if (statusCode >= 400) {
throw new Error('request error');
}
return data || null;
}
baseURL: 'https://api.alovajs.org',
...AdapterUniapp(),
responded(response) {
const { statusCode, data } = response as UniNamespace.RequestSuccessCallbackResult;
if (statusCode >= 400) {
throw new Error('request error');
}
return data || null;
}
});
```
Loading

0 comments on commit 10b9d49

Please sign in to comment.