vespaiach / axios-fetch-adapter Goto Github PK
View Code? Open in Web Editor NEWFetch adapter for axios
Home Page: https://www.npmjs.com/package/@vespaiach/axios-fetch-adapter
License: MIT License
Fetch adapter for axios
Home Page: https://www.npmjs.com/package/@vespaiach/axios-fetch-adapter
License: MIT License
It is seen here, that we evaluate response.data
identically for 'success' & error
response codes.
In case of 404
error and when await response.text() === ''
, reading await response.json()
throws an error
SyntaxError: Unexpected end of JSON input
The default axios
XHR adapter behaves differently & won't throw in this case. With this adapter I have to look into caught error message text at this point.
error - ./node_modules/@vespaiach/axios-fetch-adapter/index.js:2:0
Module not found: Package path ./lib/core/settle is not exported from package /.../node_modules/axios (see exports field in /.../node_modules/axios/package.json)
Line 2 it's complaining about https://github.com/vespaiach/axios-fetch-adapter/blob/main/index.js#L2
Using
Since, this adapter relies on fetch API so it won't work in Node environment
not true anymore.
fetch is built into all other env now, including deno, bun, nodejs,
Axios 1.7 adds Fetch adapter
Hey,
since Axios still does not support this by itself I would be willing to update to the latest in here to at least have latest version of Axios. Would you be willing to give me a CR and merge it if I will make a PR for that?
It looks like we are losing the original error here:
https://github.com/vespaiach/axios-fetch-adapter/blob/main/index.js#L51
We need to pass the original also to createError()
Error: The 'credentials' field on 'RequestInitializerDict' is not implemented.
at createRequest (VM4 worker.js:28479)
at fetchAdapter (VM4 worker.js:28354)
at dispatchRequest (VM4 worker.js:27722)
at async setup (VM4 worker.js:71161)
options.credentials = config.withCredentials ? 'include' : 'omit';
This has to be undefined in a CF worker as they don't implement options.credentials for some reason.
I don't know if this is a bug but this looks wrong in the code
axios-fetch-adapter/src/createRequest.js
Lines 35 to 37 in f6724dd
Do you want a pull-request that fixes this?
If responseType is set, but the response is empty, this library throws an error.
SyntaxError: Unexpected end of JSON input
at getResponse (index.js:72:1)
at async fetchAdapter (index.js:29:1)
Hi,
I'm using this adapter with axios in order to make a browser extension work with manifest v3.
However, after that change the headers are empty.
Here's the code:
import fetchAdapter from '@vespaiach/axios-fetch-adapter';
const axiosInstance = Axios.create({
adapter: fetchAdapter,
baseURL: `https://${hostname}`,
withCredentials: true
});
Then if I check the response the headers are empty. Can you help?
When I use a normal axios request with a FormData
payload, I get a header like this:
content-type: multipart/form-data; boundary=----WebKitFormBoundaryAtMBWBnzlZT7VwNE`
And the payload looks like this:
------WebKitFormBoundaryAtMBWBnzlZT7VwNE
Content-Disposition: form-data; name="client_id"
stuff
------WebKitFormBoundaryAtMBWBnzlZT7VwNE
Content-Disposition: form-data; name="grant_type"
password
------WebKitFormBoundaryAtMBWBnzlZT7VwNE
Content-Disposition: form-data; name="username"
manufacturer-moderator
------WebKitFormBoundaryAtMBWBnzlZT7VwNE
Content-Disposition: form-data; name="password"
blablatestpass
------WebKitFormBoundaryAtMBWBnzlZT7VwNE--
but when I use this adapter, the header changes to:
content-type: application/x-www-form-urlencoded
And because now the boundary is missing, the payload has become invalid.
Why yarn add @vespaiach/axios-fetch-adapter not found index.d.ts
Enviroment:
macOS Catalina
nextjs 12
I understand axios use CancelToken
but fetch way is AbortController
Maybe use a different config key or hard wrap of AbortController
$ npm i axios
$ npm i @vespaiach/axios-fetch-adapter
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/axios
npm ERR! axios@"^0.26.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer axios@"^0.21.1" from @vespaiach/[email protected]
npm ERR! node_modules/@vespaiach/axios-fetch-adapter
npm ERR! @vespaiach/axios-fetch-adapter@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
Is this an issue on my end or does this package need to update its axios
dependency?
I recently came across an issue that is somewhat related to #16 where I was trying to upload a file to an AWS S3 bucket with a Presigned POST URL from inside a Manifest V3 Chrome Extension which requires the use of Service Workers.
axios.defaults.adapter = fetchAdapter;
const formData = new FormData();
Object.entries(fields).forEach(([key, value]) => {
formData.append(key, value);
});
formData.append('file', file);
await axios.post(s3Url, formData);
Unfortunately this was erroring due to the Content-Type
header being set to application/www-x-form-urlencoded
instead of multipart/form-data
and the WebKit boundary injected by the browser.
Looking into the code it seems the issue is caused by the use of isStandardBrowserEnv()
inside the check which should automatically remove the Content-Type
header, allowing the browser to fill in the correct one. This helper method is expecting window
and document
to be defined which is not possible in a Service Worker environment.
if (method !== 'GET' && method !== 'HEAD') {
options.body = config.data;
// In these cases the browser will automatically set the correct Content-Type,
// but only if that header hasn't been set yet. So that's why we're deleting it.
if (isFormData(options.body) && isStandardBrowserEnv()) {
headers.delete('Content-Type');
}
}
@vespaiach Removing the isStandardBrowserEnv()
from the if statement solves my problem and allows the file upload to succeed, but I am unsure if it will have any knock on effect to other use cases of this package?
Is this repo still maintained/usable?
I tried using this with Quasar V2 to make my Axios calls compatible with service workers, but am having difficulty. All the rest of my frontend data is being saved, but not the Axios GET or POST requests. Any assistance would be much appreciated.
Hi,
When running jest, I've got the following error SyntaxError: Cannot use import statement outside a module
, I don't know how to avoid it
Hi! 👋
Firstly, thanks for your work on this project! 🙂
Today I used patch-package to patch @vespaiach/[email protected]
for the project I'm working on.
I needed to support axios version 1.6.0
Here is the diff that solved my problem:
diff --git a/node_modules/@vespaiach/axios-fetch-adapter/index.js b/node_modules/@vespaiach/axios-fetch-adapter/index.js
index 527e282..649926f 100644
--- a/node_modules/@vespaiach/axios-fetch-adapter/index.js
+++ b/node_modules/@vespaiach/axios-fetch-adapter/index.js
@@ -1,8 +1,9 @@
import axios from 'axios';
-import settle from 'axios/lib/core/settle';
-import buildURL from 'axios/lib/helpers/buildURL';
-import buildFullPath from 'axios/lib/core/buildFullPath';
-import { isUndefined, isStandardBrowserEnv, isFormData } from 'axios/lib/utils';
+import settle from 'axios/unsafe/core/settle';
+import buildURL from 'axios/unsafe/helpers/buildURL';
+import buildFullPath from 'axios/unsafe/core/buildFullPath';
+import * as browserUtils from 'axios/unsafe/platform/browser';
+import * as utils from 'axios/unsafe/utils';
/**
* - Create a request object
@@ -106,7 +107,7 @@ function createRequest(config) {
// In these cases the browser will automatically set the correct Content-Type,
// but only if that header hasn't been set yet. So that's why we're deleting it.
- if (isFormData(options.body) && isStandardBrowserEnv()) {
+ if (utils.default.isFormData(options.body) && browserUtils.default.isStandardBrowserEnv()) {
headers.delete('Content-Type');
}
}
@@ -127,7 +128,7 @@ function createRequest(config) {
}
// This config is similar to XHR’s withCredentials flag, but with three available values instead of two.
// So if withCredentials is not set, default value 'same-origin' will be used
- if (!isUndefined(config.withCredentials)) {
+ if (!utils.default.isUndefined(config.withCredentials)) {
options.credentials = config.withCredentials ? 'include' : 'omit';
}
This issue body was partially generated by patch-package.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.