developit / redaxios Goto Github PK
View Code? Open in Web Editor NEWThe Axios API, as an 800 byte Fetch wrapper.
Home Page: https://npm.im/redaxios
License: Apache License 2.0
The Axios API, as an 800 byte Fetch wrapper.
Home Page: https://npm.im/redaxios
License: Apache License 2.0
🚨 You need to enable Continuous Integration on all branches of this repository. 🚨
To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.
Since we didn’t receive a CI status on the greenkeeper/initial
branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.
If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/
.
Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial
branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.
🚨 You need to enable Continuous Integration on all branches of this repository. 🚨
To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.
Since we didn’t receive a CI status on the greenkeeper/initial
branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.
If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/
.
Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial
branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.
If you send an array as a parameter in a GET request, redaxios
turns that into a string separated by commas. This seems like a bug.
On the server-side (ie: PHP) we would expect that to be provided as an array, but it ends up being a string.
In axios
this is correctly kept as an array.
See https://github.com/axios/axios#axiosheadurl-config.
All the rest is there:
Lines 78 to 94 in e624733
Probably an oversight?
I get an error when trying to use redaxios with Next.js.
Maybe it's because of SSR?
ReferenceError: self is not defined
at e (node_modules/redaxios/dist/redaxios.js:1:1506)
Personally I don't find myself relying on deep configuration merging. It might be nice to have an option that doesn't include that.
Hello,
I just try your module and it's working well.
I just don't have any response object when HTTP Code is 422
body: ReadableStream { locked: false }
bodyUsed: false
config: Object { headers: {…} }
headers: Headers { }
ok: false
redirected: false
status: 422
statusText: "No Reason Phrase"
type: "cors"
url: "https://url"
<prototype>: {…}
But in Axios, i have in the returned object, a response
field then a data
with my json.
Did i do something wrong (i didn't change anything from my axios implementation)
Thanks in advance :)
Hello,
this redaxios is great. We replaced axios with redaxios, globally all working fine (GET, POST, DELETE methods).
But there appeared new issue with PATCH. Here is console error.
This issue not appearing if switch back to axios.
What actually we need to prepare some change from server or only some fixes in request?
Regards, Reinis
🚨 You need to enable Continuous Integration on all branches of this repository. 🚨
To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.
Since we didn’t receive a CI status on the greenkeeper/initial
branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.
If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/
.
Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial
branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.
I used baseURL in react but it doesn't affect the url
//axios-order.js
import axios from 'redaxios';
const instance = axios.create({
baseURL: 'http://something.com/api'
});
export default instance;
//login.js
import axios from './axios-order';
const url = '/auth/admin-login';
const authData = {
mobile: mobile,
password: password
};
axios.post(url, authData)
.then(response => JSON.parse(response.data))
.catch(error => {
console.log(error)
})
i receive this :
index.js:168 POST http://localhost:3000/auth/admin-login 404 (Not Found)
get, post works as expected.
But put doesnt work. When i look at the network request, it is not even sent. The following is what a successful request should look like when i use the real axios.
Request headers -->
PUT /images/4066f071-82c1-45e2-8b7d-20f4875a6119.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=patchthecode%2F20220314%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20220314T223914Z&X-Amz-Expires=600&X-Amz-SignedHeaders=host&partNumber=1&uploadId=ead03faa-359e-43df-8b4f-0561ac104edf&x-id=UploadPart&X-Amz-Signature=748d1674466bf767f038553e900ba01becde820c12a17021ca5f40012f5b3f45 HTTP/1.1
Host: localhost:9000
Connection: keep-alive
Content-Length: 75558
Accept: application/json
User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1
Content-Type: application/json
Origin: http://localhost:3001
Sec-Fetch-Site: same-site
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Referer: http://localhost:3001/
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Response header
HTTP/1.1 200 OK
Server: nginx/1.19.2
Date: Mon, 14 Mar 2022 22:39:43 GMT
Content-Length: 0
Connection: keep-alive
Accept-Ranges: bytes
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:3001
Access-Control-Expose-Headers: Date, Etag, Server, Connection, Accept-Ranges, Content-Range, Content-Encoding, Content-Length, Content-Type, Content-Disposition, Last-Modified, Content-Language, Cache-Control, Retry-After, X-Amz-Bucket-Region, Expires, X-Amz*, X-Amz*, *
Content-Security-Policy: block-all-mixed-content
ETag: "74ae190eeeae3b62ee4a2188b10d5251"
Strict-Transport-Security: max-age=31536000; includeSubDomains
Vary: Origin
Vary: Accept-Encoding
X-Amz-Request-Id: 16DC606CBABDE3E8
X-Content-Type-Options: nosniff
X-Xss-Protection: 1; mode=block
I used Chrome for this.
Version 99.0.4844.51 (Official Build) (x86_64)
get, post works as expected.
But put doesnt work. When i look at the network request, it is not even sent. The following is what a successful request should look like when i use the real axios.
Request headers -->
PUT /images/4066f071-82c1-45e2-8b7d-20f4875a6119.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=patchthecode%2F20220314%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20220314T223914Z&X-Amz-Expires=600&X-Amz-SignedHeaders=host&partNumber=1&uploadId=ead03faa-359e-43df-8b4f-0561ac104edf&x-id=UploadPart&X-Amz-Signature=748d1674466bf767f038553e900ba01becde820c12a17021ca5f40012f5b3f45 HTTP/1.1
Host: localhost:9000
Connection: keep-alive
Content-Length: 75558
Accept: application/json
User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1
Content-Type: application/json
Origin: http://localhost:3001
Sec-Fetch-Site: same-site
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Referer: http://localhost:3001/
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Response header
HTTP/1.1 200 OK
Server: nginx/1.19.2
Date: Mon, 14 Mar 2022 22:39:43 GMT
Content-Length: 0
Connection: keep-alive
Accept-Ranges: bytes
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:3001
Access-Control-Expose-Headers: Date, Etag, Server, Connection, Accept-Ranges, Content-Range, Content-Encoding, Content-Length, Content-Type, Content-Disposition, Last-Modified, Content-Language, Cache-Control, Retry-After, X-Amz-Bucket-Region, Expires, X-Amz*, X-Amz*, *
Content-Security-Policy: block-all-mixed-content
ETag: "74ae190eeeae3b62ee4a2188b10d5251"
Strict-Transport-Security: max-age=31536000; includeSubDomains
Vary: Origin
Vary: Accept-Encoding
X-Amz-Request-Id: 16DC606CBABDE3E8
X-Content-Type-Options: nosniff
X-Xss-Protection: 1; mode=block
I used Chrome for this.
Version 99.0.4844.51 (Official Build) (x86_64)
when i do redaxios.patch, i can see that its translated to patch
and not PATCH
which gives problems in terms of 400 bad request.
Looking through the redaxios code this seems intentional. Why? According to RFC 7231 page 21. 1) the table uses capital case and doesn't say anywhere that variations of the values in the table are allowed. 2) last sentence on page 20
methods are case sensitive and should be upper case.
Am I missing something here?
The Redaxios documentation refers us to the Axios documentation but that's not correct for some features. In the case of response.headers
if we were to follow the Axios documentation to retrieve say Content-Disposition
it would look like this:
response.headers['Content-Disposition']
However, redaxios has forwarded the fetch api response interface that is like so:
response.headers.get('Content-Disposition')
It would be nice to have better documentation that points out the differences between Axios and Redaxios and further highlights that redaxios is definitely not a drop-in replacement for axios.
Testing this package with Typescript, we are getting this:
import axios, { AxiosInstance, AxiosRequestConfig } from 'redaxios';
Module '"redaxios"' has no exported member 'AxiosInstance'. Did you mean to use 'import AxiosInstance from "redaxios"' instead?
As far as we understand, there is a simple typing support, so, we don't understand why this package does not include the standard axios types.
Thank you
🚨 You need to enable Continuous Integration on all branches of this repository. 🚨
To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.
Since we didn’t receive a CI status on the greenkeeper/initial
branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.
If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/
.
Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial
branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.
🚨 You need to enable Continuous Integration on all branches of this repository. 🚨
To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.
Since we didn’t receive a CI status on the greenkeeper/initial
branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.
If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/
.
Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial
branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.
As of this writing some axios features are still not supported.
I see transformRequest, but there is no transformResponse.
Not sure what level of compatibility is the goal here (ala #14), but axios serializes params
as query string parameters and redaxios doesn't. E.g.
// With axios
axios.get('/blah', { params: { foo: 'bar' }}); // -> /blah?foo=bar
// With redaxios
axios.get('/blah', { params: { foo: 'bar' }}); // -> /blah
An example, please.
When trying to use redaxios on CloudFlare Workers it will throw the following error:
The 'credentials' field on 'RequestInitializerDict' is not implemented.
As the default is same-origin for credentials this could probably be worked around by not passing a credentials property when withCredentials
is set to false:
https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials
hi,
when posting files via axios everything works as expected, once i switch to redaxios, the data were not send and serialized same way..
<input
class="btn btn-secondary"
ref="finput"
type="file"
name="files2upl"
multiple
@change="sync"
>
sync(e) {
e.preventDefault();
this.files2upl = e.target.files;
}
/*
Submits files to the server
*/
submitFiles() {
/* Initialize the form data */
let formData = new FormData();
/*
Iteate over any file sent over appending the files
to the form data.
*/
for (var i = 0; i < this.files2upl.length; i++) {
let file = this.files2upl[i];
this.log(file.size + ' '+file.name);
formData.append("files", file, file.name);
}
//redaxios didnt upload anything
//this.axios
this.redaxios
.post(this.vars.servurl + "/file/uploadfiles2", formData, {
headers: {
"content-type": "multipart/form-data",
token: this.vars.token
}
})
}
How do I use it on Deno?
If I import it as import axios from 'https://deno.land/x/[email protected]/mod.ts'
, I get this error
TS1192 [ERROR]: Module '"https://deno.land/x/[email protected]/mod.ts"' has no default export.
import axios from 'https://deno.land/x/[email protected]/mod.ts'
~~~~~
at file:///...
TS1195 [ERROR]: 'export *' does not re-export a default.
export * from './src/index.js'
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
at https://deno.land/x/[email protected]/mod.ts:1:1
Found 2 errors.
And ./src/index.js
doesn't seem to have any other exports.
Deno version: 1.22.0
I am really looking forward to using this package on my production website but on the latest released version there is bug related to posting formdata. This bug has been resolved and the PR for it merged but there has not been release since this was done.
I tried using the github url in package.json but for some reason even though the package was added but the dist
folder was never built. So I can't use it on my production site.
Can a new version be released soon so that I can continue to install through npm registry?
I'm using transformRequest to add custom header to the request before it is sent the following way:
const apiClient = redaxios.create({
baseURL,
headers: {
Accept: 'application/json',
'Content-Type': 'application/json; charset=utf-8',
},
transformRequest: [(data, headers) => {
console.log(headers['Payload-Signature']); // <-- here I see header set for previous request
if (data) headers['Payload-Signature'] = signRequestBody(data);
}],
});
As show in code above headers object is shared between requests and because of that it is not possible to customise headers per requests before one is sent.
The reason is that internal deepMerge function doesn't create a copy of 'options.header' property.
Expected behaviour:
I would expect it is possible to safely transform headers per request or modify other request props.
As a workaround I define a custom fetch:
const apiClient = redaxios.create({
baseURL,
headers: {
Accept: 'application/json',
'Content-Type': 'application/json; charset=utf-8',
},
fetch: (url, options) => fetch(url, {
...options,
headers: {
...options.headers,
'payload-signature': signRequestBody(options.body),
},
}),
});
We have isomorphic
fetch for ember - https://github.com/ember-cli/ember-fetch it working in node & browser to bring smooth SSR experience, I whould like to have redaxios, with ember-fetch support
(Using Preact-CLI's issue template as I find it easy to read)
Do you want to request a feature or report a bug?
Likely a bug
What is the current behavior?
Currently Redaxios cannot use relative URLs for its baseURL
. The URL()
constructor, if passed a base
parameter, needs that parameter to be a valid URL on its own, and a relative URL like /api/
is not. MDN Docs.
If the current behaviour is a bug, please provide the steps to reproduce.
Simply open a browser console and write:
new URL('foo', '/api/');
You will get an error stating the following:
Uncaught TypeError: URL constructor: /foo/ is not a valid URL.
That example is how Redaxios currently forms its URLs when a baseURL
is supplied
What is the expected behaviour?
I'd like to be able to use relative URLs for the base as they're very handy for proxying front-end applications.
Line 70 in 1c2d584
redaxios
is not defined anywhere, so it cannot be used downstream. That is, it is impossible to define a function that takes the return type of create
as a parameter.
In order to ensure maximum compatibility with Axios, it would be make devs feel much more comfortable if redaxios pulled in the axios test suite and could pass all of its tests. Or at least have a list of failed tests, so that we can explain to devs which features aren't supported and why
🚨 You need to enable Continuous Integration on all branches of this repository. 🚨
To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.
Since we didn’t receive a CI status on the greenkeeper/initial
branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.
If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/
.
Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial
branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.
First, thank you for this awesome project! What a huge transfer size savings Redaxios is over Axios.
We have some code like below that works fine with Axios but fails with Redaxios:
const response = await axios({
method: 'POST',
url: getApiUrl(),
data: {
...formData,
},
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
});
We get:
Access to fetch at 'https://example.com/' from origin 'http://localhost:1212' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
heeeeeeeeeellll nah :D
typescript, please
We would really like to use redaxios but interceptors are quite important for us.
Would love to be able to add interceptors in redaxios.
The generated types seem to be slightly wrong...
node_modules/redaxios/dist/index.d.ts:41:56 - error TS2304: Cannot find name 'T_8'.
41 spread<T_7, R>(fn: (...args: T_8[]) => R): (array: T_8[]) => R;
When you pass FormData
objects as the data parameter the library sends the request as application/json
.
The problem is here:
if (data && typeof data === 'object') {
data = JSON.stringify(data);
customHeaders['Content-Type'] = 'application/json';
}
as typeof new FormData() === 'object'
.
With axios you have to set withCredentials
or cookies aren't sent to the server. Some things I've read suggest fetch
requires just credentials
. I don't see either of those things (or really much at all related to cookies) in the redaxios source code, and yet I'm seeing cookies sent with requests. Which is neat. But I want to make sure that keeps happening and/or understand what makes it happen. Thanks.
Edit: also maybe withCredentials
should be supported if you're going for compatibility with axios.
I don't see that the axios timeout config is supported.
https://github.com/axios/axios#config-defaults
As "the goal is to support most/all features", Config Defaults also seems to be an important feature.
Currently, something like:
instance.defaults.headers.get['Content-Type'] = 'application/json'`
Results in:
Uncaught TypeError: instance.defaults.headers is undefined
im currently using axios(CONFIGS_HERE) and suddenly content-type and headers doesnt work.
tried to have a
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
but it doesnt reflect on my API request. its still "application/json"
Please help.
Right now there are no built-in types, we are using types from axios
, but it would be nice to have built-in types for redaxios
.
🚨 You need to enable Continuous Integration on all branches of this repository. 🚨
To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.
Since we didn’t receive a CI status on the greenkeeper/initial
branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.
If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/
.
Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial
branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.
Would be great! Thanks!
https://github.com/axios/axios#config-defaults
As "the goal is to support most/all features", supporting all instance methods also seems to be an important feature.
Currently, something like:
let uri = axios.getUri(axiosConfig)
Results in:
TypeError: axios.getUri is not a function
getUri
method is specially useful when working with multiple instances, each one with a different baseURL
.
Hey there,
I'm trying to convert some axios requests to redaxios
and I'm noticing a discrepancy in the responses. The data object coming back from redaxios
is stringified, whereas the data object I currently receive with axios
is valid JSON. I am wondering if it would make sense to do this conversion in redaxios
so that it is truly a drop-in replacement of axios?
Looking forward to hearing your thoughts, thanks!
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.