XMLHttpRequest adapter for alova
English | 📑中文
npm install @alova/adapter-xhr --saveUse xhrRequestAdapter as request adapter for alova.
import { createAlova } from 'alova';
import { xhrRequestAdapter } from '@alova/adapter-xhr';
const alovaInst = createAlova(
//...
requestAdapter: xhrResponseAdapter(),
//...
);The XMLHttpRequest adapter provides basic configuration parameters, including responseType, withCredentials, mimeType, auth, as follows:
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,
/**
* 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);
// ...Use FormData to upload files, and this FormData instance will be sent to the server through xhr.send.
const uploadFile = imageFile => {
const formData = new FormData();
formData.append('file', imageFile);
return alovaInst.Post('/uploadImg', formData, {
// Start upload progress
enableUpload: true
});
};
const {
loading,
data,
uploading,
send: sendUpload
} = useRequest(uploadFile, {
immediate: false
});
// Picture selection event callback
const handleImageChoose = ({ target }) => {
sendUpload(target.files[0]);
};Point the request url to the file address to download, you can also enable the download progress by setting enableDownload to true.
const downloadFile = () =>
alovaInst.Get('/bigImage. jpg', {
// Start download progress
enableDownload: true,
responseType: 'blob'
});
const { loading, data, downloading, send, onSuccess } = useRequest(downloadFile, {
immediate: false
});
onSuccess(({ data: imageBlob }) => {
// download image
const anchor = document.createElement('a');
anchor.href = URL.createObjectURL(blob);
anchor.download = 'image.jpg';
anchor.click();
URL.revokeObjectURL(anchor.href);
});
const handleImageDownload = () => {
send();
};When developing applications, we may still need to use simulated requests. Only by default, the response data of Mock Request Adapter (@alova/mock) is a Response instance, which is compatible with the GlobalFetch request adapter by default. When using the XMLHttpRequest adapter, we You need to adapt the response data of the mock request adapter to the XMLHttpRequest adapter. In this case, you need to use the xhrMockResponse exported in the @alova/adapter-xhr package as the response adapter.
import { defineMock, createAlovaMockAdapter } from '@alova/mock';
import { xhrRequestAdapter, xhrMockResponse } from '@alova/adapter-xhr';
const mocks = defineMock({
//...
});
// mock data request adapter
export default createAlovaMockAdapter([mocks], {
// After specifying the request adapter, requests that do not match the simulated interface will use this adapter to send requests
httpAdapter: xhrRequestAdapter(),
// Use xhrMockResponse to adapt the simulated data to the XMLHttpRequest adapter
onMockResponse: xhrMockResponse
});
export const alovaInst = createAlova({
//...
// Control whether to use the simulated request adapter through environment variables
requestAdapter: process.env.NODE_ENV === 'development' ? mockAdapter : xhrRequestAdapter()
});