Skip to content

Commit

Permalink
Merge pull request #514 from Chalarangelo/XMLHttpRequest
Browse files Browse the repository at this point in the history
[FEATURE] http requests snippets
  • Loading branch information
Chalarangelo committed Jan 10, 2018
2 parents b04e96a + 71a907d commit d767834
Show file tree
Hide file tree
Showing 5 changed files with 122 additions and 0 deletions.
29 changes: 29 additions & 0 deletions snippets/httpGet.md
@@ -0,0 +1,29 @@
### httpGet

Makes a `GET` request to the passed URL.

Use [`XMLHttpRequest`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) web api to make a `get` request to the given `url`.
Handle the `onload` event, by calling the given `callback` the `responseText`.
Handle the `onerror` event, by running the provided `err` function.
Omit the third argument, `err`, to log errors to the console's `error` stream by default.

```js
const httpGet = (url, callback, err = console.error) => {
const request = new XMLHttpRequest();
request.open("GET", url, true);
request.onload = () => callback(request.responseText);
request.onerror = () => err(request);
request.send();
};
```

```js
httpGet('https://jsonplaceholder.typicode.com/posts/1', console.log); /*
Logs: {
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}
*/
```
39 changes: 39 additions & 0 deletions snippets/httpPost.md
@@ -0,0 +1,39 @@
### httpPost

Makes a `POST` request to the passed URL.

Use [`XMLHttpRequest`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) web api to make a `post` request to the given `url`.
Set the value of an `HTTP` request header with `setRequestHeader` method.
Handle the `onload` event, by calling the given `callback` the `responseText`.
Handle the `onerror` event, by running the provided `err` function.
Omit the third argument, `data`, to send no data to the provided `url`.
Omit the fourth argument, `err`, to log errors to the console's `error` stream by default.

```js
const httpPost = (url, callback, data = null, err = console.error) => {
const request = new XMLHttpRequest();
request.open("POST", url, true);
request.setRequestHeader('Content-type','application/json; charset=utf-8');
request.onload = () => callback(request.responseText);
request.onerror = () => err(request);
request.send(data);
};
```

```js
const newPost = {
"userId": 1,
"id": 1337,
"title": "Foo",
"body": "bar bar bar"
};
const data = JSON.stringify(newPost);
httpPost('https://jsonplaceholder.typicode.com/posts', console.log, data; /*
Logs: {
"userId": 1,
"id": 1337,
"title": "Foo",
"body": "bar bar bar"
}
*/
```
24 changes: 24 additions & 0 deletions snippets_archive/httpDelete.md
@@ -0,0 +1,24 @@
### httpDelete

Makes a `DELETE` request to the passed URL.

Use `XMLHttpRequest` web api to make a `delete` request to the given `url`.
Handle the `onload` event, by running the provided `callback` function.
Handle the `onerror` event, by running the provided `err` function.
Omit the third argument, `err` to log the request to the console's error stream by default.

```js
const httpDelete = (url, callback, err = console.error) => {
const request = new XMLHttpRequest();
request.open("DELETE", url, true);
request.onload = () => callback(request);
request.onerror = () => err(request);
request.send();
};
```

```js
httpDelete('https://website.com/users/123', request => {
console.log(request.responseText);
}); // 'Deletes a user from the database'
```
28 changes: 28 additions & 0 deletions snippets_archive/httpPut.md
@@ -0,0 +1,28 @@
### httpPut

Makes a `PUT` request to the passed URL.

Use `XMLHttpRequest` web api to make a `put` request to the given `url`.
Set the value of an `HTTP` request header with `setRequestHeader` method.
Handle the `onload` event, by running the provided `callback` function.
Handle the `onerror` event, by running the provided `err` function.
Omit the last argument, `err` to log the request to the console's error stream by default.

```js
const httpPut = (url, data, callback, err = console.error) => {
const request = new XMLHttpRequest();
request.open("PUT", url, true);
request.setRequestHeader('Content-type','application/json; charset=utf-8');
request.onload = () => callback(request);
request.onerror = () => err(request);
request.send(data);
};
```

```js
const password = "fooBaz";
const data = JSON.stringify(password);
httpPut('https://website.com/users/123', data, request => {
console.log(request.responseText);
}); // 'Updates a user's password in database'
```
2 changes: 2 additions & 0 deletions tag_database
Expand Up @@ -62,6 +62,8 @@ hasFlags:node
head:array
hexToRGB:utility,string,math,advanced
hide:browser,css
httpGet:utility,url,browser
httpPost:utility,url,browser
httpsRedirect:browser,url
indexOfAll:array
initial:array
Expand Down

0 comments on commit d767834

Please sign in to comment.