Ajax new gameplay Fetch API

Web asynchronous applications are now implemented based on XMLHttpRequest / ActiveXObject (IE), which are not specifically designed for resource acquisition, so their APIs are complex and require developers to deal with compatibility issues. While such upper-level packaging is commonly used by developers, the $.ajax() Fetch API is intended to provide a more convenient and consistent native API while unifying the resource acquisition behavior on the Web platform, including outside-chain scripting, styling, graphics, AJAX, and more. While the fetch API uses promise, it is a simple and straightforward API that is easier to use than XMLHttpRequest.

Fetch API Syntax

1 fetch (URL)2. Then (function(response) {3         returnResponse.json ();4     })5. Then (function(data) {6 console.log (data);7     })8.Catch(function(e) {9Console.log ("Oops, Error");Ten     }); One //Use the ES6 arrow function A fetch (URL) -. Then (response =Response.json ()) -. Then (data =console.log (data)) the.Catch(E = Console.log ("Oops, Error"), E)) - //use async/await to make final optimizations - //with await, writing asynchronous code is as cool as writing synchronous code. An await can be followed by a Promise object, which indicates that waiting for Promise resolve () will continue to execute downward, and if Promise is reject () or throws an exception, it will be captured by the try...catch outside.  -(Asyncfunction () { +     Try { -Let response =await fetch (URL); +Let data =Response.json (); A console.log (data); at}Catch(e) { -Console.log ("Oops, Error", e); -     } -})();

GET request

1   Fetch (URL, {2     // default 3    headers:{4         "Accept": "Application/json, Text/plain, */*"5    }6}) 7 . Then (response = Response.json ())8 . Then (data = console.log (data))  9 . Catch (E = Console.log ("Oops, Error", E))

POST request

Fetch (URL, {    "POST",    headers: {        "Accept": "Application/json, Text/plain, */*",         "Content-type": "application:/x-www-form-urlencoded; Charset=utf-8 "    },    " name=hzzly&age=22 "== Console.log ( Data)). Catch (E = Console.log ("Oops, Error", E))

Send credentials using a FETCH request

To use fetch to send a request with a credential such as a cookie. You can set the Credentials property value to "include" in the Options object:

  Fetch (url,{    "include"})

Encapsulating a POST request

  //concatenation of objects into name=hzzly&age=22 string formfunctionparams (obj) {let result= ' ' for(Let iteminchobj) {Result+ = ' &${item}=${obj[item]} '}if(Result) {result= Result.slice (1)    }    returnresult}functionpost (URL, paramsobj) {let result=Fetch (URL, {methods:' POST ', Credentials:"Include"headers: {"Accept": "Application/json, Text/plain, */*",            "Content-type": "application:/x-www-form-urlencoded; Charset=utf-8 "}, Body:params (Paramsobj)})returnResult}let obj={name:' Hzzly ', Age:22}post (URL, obj). Then (response=Response.json ()). Then (data=console.log (data)).Catch(E = Console.log ("Oops, Error", E))

Please click here react standard fetch is what?

Ajax new gameplay Fetch API