普通的 Ajax 请求,用 XHR 发送一个 json 请求一般是这样的:
- var xhr = new XMLHttpRequest();
- xhr.open("GET", url);
- xhr.responseType = 'json';
- xhr.onload = function() {
- console.log(xhr.response);
- };
- xhr.onerror = function() {
- console.log("error")
- }
- xhr.send();
使用 fetch 实现的方式:
- fetch(url).then(function(response) {
- return response.json();
- }).then(function(data) {
- console.log(data)
- }).
- catch(function(e) {
- console.log("error")
- })
也可以用 async/await 的方式
- try {
- let response = await fetch(url);
- let data = await response.json();
- console.log(data);
- } catch(e) {
- console.log("error")
- }
用了 await 后,写异步代码感觉像同步代码一样爽。await 后面可以跟 Promise 对象,表示等待 Promise resolve() 才会继续下去执行,如果 Promise 被 reject() 或抛出异常则会被外面的 try...catch 捕获。
fetch 的主要优点是
但是也有它的不足
fetch 语法:
- fetch(url, options).then(function(response) {
- // handle HTTP response
- },
- function(error) {
- // handle network error
- })
具体参数案例:
- //兼容包
- require('babel-polyfill') require('es6-promise').polyfill()
- import 'whatwg-fetch'
- fetch(url, {
- method: "POST",
- body: JSON.stringify(data),
- headers: {
- "Content-Type": "application/json"
- },
- credentials: "same-origin"
- }).then(function(response) {
- response.status //=> number 100–599
- response.statusText //=> String
- response.headers //=> Headers
- response.url //=> String
- response.text().then(function(responseText) {...
- })
- },
- function(error) {
- error.message //=> String
- })
参数说明
定义要获取的资源。这可能是:一个 USVString 字符串,包含要获取资源的 URL。一个 Request 对象。
一个配置项对象,包括所有对请求的设置。可选的参数有:
: 请求使用的方法,如 GET、POST。
- method
: 请求的头信息,形式为 Headers 对象或 ByteString。
- headers
: 请求的 body 信息:可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
- body
: 请求的模式,如 cors、 no-cors 或者 same-origin。
- mode
: 请求的 credentials,如 omit、same-origin 或者 include。
- credentials
: 请求的 cache 模式: default, no-store, reload, no-cache, force-cache, 或者 only-if-cached。
- cache
一个 Promise,resolve 时回传 Response 对象:
属性:
- HTTP 请求结果参数,在 100–599 范围
- status (number)
- 服务器返回的状态报告
- statusText (String)
- 如果返回 200 表示请求成功则为 true
- ok (boolean)
- 返回头部信息,下面详细介绍
- headers (Headers)
- 请求的地址
- url (String)
方法:
- 以 string 的形式生成请求 text
- text()
- 生成 JSON.parse(responseText) 的结果
- json()
- 生成一个 Blob
- blob()
- 生成一个 ArrayBuffer
- arrayBuffer()
- 生成格式化的数据,可用于其他的请求
- formData()
其他方法:
- clone()
- Response.error()
- Response.redirect()
- response.headers
- 判断是否存在该信息头
- has(name) (boolean)
- 获取信息头的数据
- get(name) (String)
- 获取所有头部数据
- getAll(name) (Array)
- 设置信息头的参数
- set(name, value)
- 添加 header 的内容
- append(name, value)
- 删除 header 的信息
- delete(name)
- 循环读取 header 的信息
- forEach(function(value, name){ ... }, [thisContext])
- //获取CSS里ul的id属性
- let uldom = document.getElementById("students");
- //单独创建一个json文件,获取地址
- let url = "data.json";
- function main() {
- fetch(url).then(respone = >{
- return respone.json();
- }).then(students = >{
- let html = ``;
- for (let i = 0, l = students.length; i < l; i++) {
- let name = students[i].name;
- let age = students[i].age;
- html += ` < li > 姓名:$ {
- name
- },年龄:$ {
- age
- } < /li>
- `
- }
- uldom.innerHTML = html;
- });
- }
- main();/
结合 await 最终代码
- let uldom = document.getElementById("students");
- let url = "data.json";
- async
- function main() {
- let respone = await fetch(url);
- let students = await respone.json();
- let html = ``;
- for (let i = 0, l = students.length; i < l; i++) {
- let name = students[i].name;
- let age = students[i].age;
- html += ` < li > 姓名:$ {
- name
- },年龄:$ {
- age
- } < /li>
- `
- }
- uldom.innerHTML=html;
- }
- main();/
data.json 文件内容如下:
- [{
- "name": "张三",
- "age": "3"
- },
- {
- "name": "李万",
- "age": "1"
- },
- {
- "name": "王二",
- "age": "4"
- },
- {
- "name": "二狗",
- "age": "3"
- },
- {
- "name": "狗蛋",
- "age": "5"
- },
- {
- "name": "牛娃",
- "age": "7"
- }]
运行后结果是:
- 姓名:张三,年龄:3姓名:李万,年龄:1姓名:王二,年龄:4姓名:二狗,年龄:3姓名:狗蛋,年龄:5姓名:牛娃,年龄:7
来源: http://www.tuicool.com/articles/VJf6F3f