Please enable JavaScript.

Coggle requires JavaScript to display documents.

Asynchronous Javascript, fetch API, easy http3, promises, XHR Object, Ajax…

- - - - .then() → takes in a function and passes a Response Object
        
        response returns a promise
        
        .then(function (data) { ... }
        
        .catch(function (err) { ... }
        
        return response.text();
      - for fetching text → response.text()
      - for fetching json → response.json()
      - .then(function (response) { ... }
- - - - setTimeout(function () { ... resolve(); ... reject(); }, 1000);
      - return new Promise(function(resolve, reject){ ... }
      - because function returns a promise → function call handles success → resolve() with .then (), and error → reject() with .catch
      - function createPost(post) { return new Promise(function (resolve, reject) { setTimeout(function () { posts.push(post); const error = true; if (!error) { resolve(); } else { reject("fag"); } }, 3000); }); }
    - - createPost({ title: "post2", body: "this is body2" }).then(getPosts);
    - - createPost({ title: "post2", body: "this is body2" }).then(getPosts).catch(function(err) { ... });
- - - - 1: server connection established
      - 2: request received
      - 3: processing request
      - 4: request finished and response is ready
      - 0: request not initialized
- - - - xhr.open('GET', 'customer.json', true);
      - call xhr.onLoad
        
        xhr.send
        
        xhr.send();
        
        we are getting the data asynchronously ... would work the same way through other api's
        
        xhr.onload = function(){ ... }
        
        check status
        
        work will data
        
        parse data
        
        const customer = JSON.parse(this.responseText);
        
        output to html
        
        or run through data array
        
        customers.forEach(function (customer) { output += ... }
- - - - get number of jokes from form
      - prep xhr request
        
        create new object
        
        open request
        
        xhr.open('GET', http://api.icndb.com/jokes/random/${number}, true);
        
        onLoad
        
        set response = JSON.parse(response data object)
        
        const response = JSON.parse(this.responseText);
        
        check for success → see API object
        
        insert into DOM
        
        output += <li>${joke.joke}</li>;
        
        loop through value (which holds the array) → append new elements to output and add html to ul container
        
        document.querySelector('.jokes').innerHTML = output;
        
        response.value.forEach(function(joke){ ... }
        
        send
- - - - { method: 'POST', headers: {'Content-type':'application/json'}, body: JSON.stringify(data)}
  - - - { method: 'PUT', headers: {'Content-type':'application/json'}, body: JSON.stringify(data)}
  - - - { method: 'DELETE', headers: {'Content-type':'application/json'}
- - - - createPost(post);
        
        2s response
        
        add post to server
      - getPosts();
        
        1s response
        
        get posts from server
      - mimic server response with setTimeout();
      - synchronous calls create post → get post
        
        the get request returned before create → synchronous
        
        asynchronous calls → add callback
        
        create request to server → add callback function
        
        function createPost(post, callback) { ... }
        
        callback();
        
        call function in setTiimeout
        
        → output two posts
        
        createPost({ title: "post2", body: "this is body2" });
        
        getPosts();
- - - - POST
        
        easyHTTP.prototype.post = function(url, data, callback) { ... };
        
        this.http.open('POST', url, true);
        
        this.http.setRequestHeader('Content-type', 'application/json');
        
        this.send(JSON.stringify(data));
        
        this.http.onload = function () { callback(response) ... }
      - GET
        
        easyHTTP.prototype.get = function (url, callback) { ... };
        
        this.http.send();
        
        this.http.onload = function () { callback(response) ... }
        
        this.http.open("GET", url, true);
        
        declare variable to capture scope: let self = this;
      - PUT
        
        easyHTTP.prototype.put = function(url, data, callback) { ... };
        
        this.http.open('PUT', url, true);
        
        this.http.setRequestHeader('Content-type', 'application/json');
        
        this.send(JSON.stringify(data));
        
        this.http.onload = function () { callback(response) ... }
      - DELETE
        
        easyHTTP.prototype.delete = function (url, callback) { ... };
        
        this.http.open('DELETE', url, true);
        
        this.send();
        
        this.http.onload = function () { callback(response) ... }