{"id":18455635,"url":"https://github.com/alovajs/adapter-xhr","last_synced_at":"2025-04-08T04:34:07.727Z","repository":{"id":123030869,"uuid":"610543554","full_name":"alovajs/adapter-xhr","owner":"alovajs","description":"XMLHttpRequest adapter for alova.js","archived":false,"fork":false,"pushed_at":"2024-04-26T16:49:49.000Z","size":2103,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-29T21:55:56.403Z","etag":null,"topics":["alova","axios","fetch-api","request","typescript","xhr","xmlhttprequest"],"latest_commit_sha":null,"homepage":"https://alova.js.org/tutorial/extension/alova-adapter-xhr","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alovajs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-07T01:28:58.000Z","updated_at":"2024-04-26T16:49:42.000Z","dependencies_parsed_at":"2024-01-16T04:19:27.769Z","dependency_job_id":"3db375da-099a-49c3-82f0-a2f33fbe1ccd","html_url":"https://github.com/alovajs/adapter-xhr","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alovajs%2Fadapter-xhr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alovajs%2Fadapter-xhr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alovajs%2Fadapter-xhr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alovajs%2Fadapter-xhr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alovajs","download_url":"https://codeload.github.com/alovajs/adapter-xhr/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247779796,"owners_count":20994569,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alova","axios","fetch-api","request","typescript","xhr","xmlhttprequest"],"created_at":"2024-11-06T08:08:36.845Z","updated_at":"2025-04-08T04:34:06.608Z","avatar_url":"https://github.com/alovajs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @alova/adapter-xhr\n\nXMLHttpRequest adapter for alova\n\n[![npm](https://img.shields.io/npm/v/@alova/adapter-xhr)](https://www.npmjs.com/package/@alova/adapter-xhr)\n[![build](https://github.com/alovajs/adapter-xhr/actions/workflows/release.yml/badge.svg?branch=main)](https://github.com/alovajs/adapter-xhr/actions/workflows/main.yml)\n[![coverage status](https://coveralls.io/repos/github/alovajs/adapter-xhr/badge.svg?branch=main)](https://coveralls.io/github/alovajs/adapter-xhr?branch=main)\n![typescript](https://badgen.net/badge/icon/typescript?icon=typescript\u0026label)\n![license](https://img.shields.io/badge/license-MIT-blue.svg)\n\n\u003cp\u003eEnglish | \u003ca href=\"./README.zh-CN.md\"\u003e📑中文\u003c/a\u003e\u003c/p\u003e\n\n[website](https://alova.js.org/extension/alova-adapter-xhr) | [alova](https://github.com/alovajs/alova)\n\n## Install\n\n```bash\nnpm install @alova/adapter-xhr --save\n```\n\n## Instructions\n\n### create alova\n\nUse **xhrRequestAdapter** as request adapter for alova.\n\n```javascript\nimport { createAlova } from 'alova';\nimport { xhrRequestAdapter } from '@alova/adapter-xhr';\n\nconst alovaInst = createAlova(\n   //...\n   requestAdapter: xhrResponseAdapter(),\n   //...\n);\n```\n\n### Request\n\nThe XMLHttpRequest adapter provides basic configuration parameters, including `responseType`, `withCredentials`, `mimeType`, `auth`, as follows:\n\n```javascript\nconst list = () =\u003e\n\talovaInst.Get('/list', {\n\t\t/**\n\t\t * Set the response data type\n\t\t * Can be set to change the response type. Values are: \"arraybuffer\", \"blob\", \"document\", \"json\" and \"text\"\n\t\t * defaults to \"json\"\n\t\t */\n\t\tresponseType: 'text',\n\n\t\t/**\n\t\t * 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\n\t\t */\n\t\twithCredentials: true,\n\n\t\t/**\n\t\t * Set the mimeType of the response data\n\t\t */\n\t\tmimeType: 'text/plain; charset=x-user-defined',\n\n\t\t/**\n\t\t * auth means use HTTP Basic authentication and provide credentials.\n\t\t * This will set an `Authorization` header, overriding any existing\n\t\t * Custom headers for `Authorization` set using `headers`.\n\t\t * Note that only HTTP Basic authentication can be configured via this parameter.\n\t\t * For Bearer tokens etc., use the `Authorization` custom header instead.\n\t\t */\n\t\tauth: {\n\t\t\tusername: 'name1',\n\t\t\tpassword: '123456'\n\t\t}\n\t});\nconst { loading, data } = useRequest(list);\n// ...\n```\n\n### Upload\n\nUse `FormData` to upload files, and this `FormData` instance will be sent to the server through `xhr.send`.\n\n```javascript\nconst uploadFile = imageFile =\u003e {\n\tconst formData = new FormData();\n\tformData.append('file', imageFile);\n\treturn alovaInst.Post('/uploadImg', formData, {\n\t\t// Start upload progress\n\t\tenableUpload: true\n\t});\n};\n\nconst {\n\tloading,\n\tdata,\n\tuploading,\n\tsend: sendUpload\n} = useRequest(uploadFile, {\n\timmediate: false\n});\n\n// Picture selection event callback\nconst handleImageChoose = ({ target }) =\u003e {\n\tsendUpload(target.files[0]);\n};\n```\n\n### download\n\nPoint the request url to the file address to download, you can also enable the download progress by setting `enableDownload` to true.\n\n```javascript\nconst downloadFile = () =\u003e\n\talovaInst.Get('/bigImage. jpg', {\n\t\t// Start download progress\n\t\tenableDownload: true,\n\t\tresponseType: 'blob'\n\t});\n\nconst { loading, data, downloading, send, onSuccess } = useRequest(downloadFile, {\n\timmediate: false\n});\nonSuccess(({ data: imageBlob }) =\u003e {\n\t// download image\n\tconst anchor = document.createElement('a');\n\tanchor.href = URL.createObjectURL(blob);\n\tanchor.download = 'image.jpg';\n\tanchor.click();\n\tURL.revokeObjectURL(anchor.href);\n});\nconst handleImageDownload = () =\u003e {\n\tsend();\n};\n```\n\n## Mock request adapter compatible\n\nWhen developing applications, we may still need to use simulated requests. Only by default, the response data of [Mock Request Adapter (@alova/mock)](https://alova.js.org/extension/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.\n\n```javascript\nimport { defineMock, createAlovaMockAdapter } from '@alova/mock';\nimport { xhrRequestAdapter, xhrMockResponse } from '@alova/adapter-xhr';\n\nconst mocks = defineMock({\n\t//...\n});\n\n// mock data request adapter\nexport default createAlovaMockAdapter([mocks], {\n\t// After specifying the request adapter, requests that do not match the simulated interface will use this adapter to send requests\n\thttpAdapter: xhrRequestAdapter(),\n\n\t// Use xhrMockResponse to adapt the simulated data to the XMLHttpRequest adapter\n\tonMockResponse: xhrMockResponse\n});\n\nexport const alovaInst = createAlova({\n\t//...\n\t// Control whether to use the simulated request adapter through environment variables\n\trequestAdapter: process.env.NODE_ENV === 'development' ? mockAdapter : xhrRequestAdapter()\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falovajs%2Fadapter-xhr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falovajs%2Fadapter-xhr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falovajs%2Fadapter-xhr/lists"}