Code Monkey home page Code Monkey logo

fetch101's Introduction

Fetch

Contents

Herein are:

  • examples of the fetch API.
  • Unit tests for practicing use of fetch.

Installation & Use

  1. Clone the repository thus:
    git clone https://github.com/portsoc/fetch101.git
  2. Go into the locally cloned repo:
    cd fetch101
  3. Install libraries (including the http server we use in the next stage):
    npm install
  4. Start a simple HTTP server on port 8080 with:
    npm start
  5. See the examples at http://localhost:8080/examples/
  6. Unit tests.
    • See the unit tests at http://localhost:8080/
    • Edit index.js; improving and adding code until all the tests pass.

Examples

  1. fetch_message

    • Get message.txt, from a server and put in the DOM
  2. fetch_on_button

    • When a button is pressed, get message.txt, from a server and put in the DOM
  3. error_handling

    • Two buttons are presented. One fetches message.txt which is retrieved successfully. The second button retrieves imaginary.file which does not exist, so a the response object's ok property (i.e. response.ok) will be false; an error messsage is therefore displayed.
  4. json_data

    • When a button is pressed, get data.json from a server, parse the data and populate an unordered list with it.
  5. response_headers

    • This extends the error handling example. The same function is used to process three outcomes when different files are loaded. In addition to handlng the non-existent file, the response headers are checked to learn the type of the retrieved data. Different types of data (text and JSON in this example) can be processed differently.
  6. other_peoples_data

    • Instead of a local JSON file, a remote data file is loaded.
  7. interaction

  • user input is taken and used to construct a URL.
  • the response from the server is used to indicate whether a word is valid in scrabble or not.

fetch101's People

Contributors

dependabot[bot] avatar ear1grey avatar jacekkopecky avatar matt-thepie avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

fetch101's Issues

improvements

  • switch 04 and 05
  • in example of error and header handling, have three buttons in the page, don't cycle with index
  • maybe also split example with content types and response.ok into two examples

add ajax tests

Add all XHR tests (the code is in ws_canvas commit 5f96d3e89c5804c9872448c552737f5f574f3aa9 ) and repurpose for use as Fetch.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.