js fetch基础用法学习（一）_js fetch mdn

文章参考

1. 使用 Fetch MDN

fetch 基本用法

fetch 接收两个参数

1. 第一个参数是 URL 地址
2. 第二个参数是请求的配置信息，包含headers、请求类型（GET/POST）、是否跨域等信息

参数说明

fetch(url, {
	body: JSON.stringify(data), // must match 'Content-Type' header
	cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
	credentials: "same-origin", // include, same-origin, *omit
	headers: {
		"user-agent": "Mozilla/4.0 MDN Example",
		"content-type": "application/json"
	},
	method: "POST", // *GET, POST, PUT, DELETE, etc.
	mode: "cors", // no-cors, cors, *same-origin
	redirect: "follow", // manual, *follow, error
	referrer: "no-referrer" // *client, no-referrer
	})
	.then(response => response.json()) // parses response to JSON
	.then(function(myJson) {
		console.log(myJson);
	});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

1：method : 请求使用的方法，如 GET、POST。
2：headers: 请求的头信息，形式为 [Headers] 的对象或包含 [ByteString] 值的对象字面量。
3：body: 请求的 body 信息：可能是一个 [Blob]、[BufferSource]、[FormData]、[URLSearchParams]或者 [USVString] 对象。
注意 GET 或 HEAD 方法的请求不能包含 body 信息。
4：mode: 请求的模式，如 cors、 no-cors 或者 same-origin。
5：credentials: 请求的 credentials，如 omit、``same-origin 或者 include。为了在当前域名内自动发送 cookie ，必须提供这个选项， 从 Chrome 50 开始， 这个属性也可以接受 [FederatedCredential] 实例或是一个 [PasswordCredential] 实例。
6：cache : 请求的 cache 模式: default 、 no-store 、reload 、no-cache 、force-cache 或者 only-if-cached 。
7：redirect: 可用的 redirect 模式: follow (自动重定向), error (如果产生重定向将自动终止并且抛出一个错误), 或者 manual (手动处理重定向). 在Chrome中，Chrome 47之前的默认值是 follow，从 Chrome 47开始是 manual。
8：referrer: 一个 [USVString] 可以是 no-referrer、``client或一个 URL。默认是 client。
9：referrerPolicy : Specifies the value of the referer HTTP header. May be one of no-referrer、 no-referrer-when-downgrade、 origin、 origin-when-cross-origin、 unsafe-url 。
10：integrity: 包括请求的 [subresource integrity]值 （ 如： sha256BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=）。

fetch 返回的是一个包含Response对象的Promise对象，并不能直接获取后台的数据

1. fetch 返回的是一个Promise对象
2. promise 对象获取到的是一个Response对象，即Response对象只是一个 HTTP 响应，而不是真的JSON。
3. 为了获取后台返回的JSON内容，我们需要使用Response.json()方法
4. 在第二个then方法中才能获取后台返回的数据

fetch 传递参数的方式

传递JSON字符串的方式（后台使用@RequestBody修饰接收参数）

@PostMapping("/searchDictionary")
public Object searchDictionary(@RequestBody Dictionary dictionary) {
	log.info(dictionary.toString());
	Page<Dictionary> list = dictionaryService.findDictionaryByObject(dictionary);
	return ObjectToResult.getResult(list);
}
1
2
3
4
5
6

function postFetchAction() {
  var paramObj = {
	value: "food",
	pageSize: 4,
	pageNum: 1
  };
  var options = {
	// 如果后台使用@RequestBody修饰接收参数， content-type 一定不能少，否则会报错
	headers: {
	  "content-type": "application/json"
	},
	method: "POST", // *GET, POST, PUT, DELETE, etc.
	mode: "cors", // no-cors, cors, *same-origin,
	body: JSON.stringify(paramObj)
  };
  fetch("http://localhost:8080/dictionary/searchDictionary", options)
	.then(function(res) {
	  debugger;
	  console.log(res);
	  // 这个函数返回的是接口响应的值，执行后面的then 方法
	  return res.json();
	})
	// 第二个 then 才是获取后台实际返回的结果
	.then(function(response) {
	  debugger;
	  console.log(response);
	});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

fetch上传文件以FormData对象的方式

function uploadAction () {
  let domFileObj = document.getElementById("macFile")

  let param = new FormData();
  //通过append向form对象添加数据
  param.append("macFile", domFileObj.files[0]);
  // FormData私有类对象，访问不到，可以通过get判断值是否传进去
  var options = {
    // 则header 不需要设置 "content-type": "application/json"
    headers: {
      'Content-Type':'mutlipart/form-data'
    },
    method: "POST", // *GET, POST, PUT, DELETE, etc.
    mode: "cors", // no-cors, cors, *same-origin,
    body: param
  };
  fetch("http://localhost:3000/common/upload", options)
  .then(function(res) {
    debugger;
    console.log(res);
    // 这个函数返回的是接口响应的值，执行后面的then 方法
    return res.json();
  })
  // 第二个 then 才是获取后台实际返回的结果
  .then(function(response) {
    debugger;
    console.log(response);
  });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

需要设置 Header 'Content-Type':'mutlipart/form-data'

传递FormData对象的方式（后台没有@RequestBody修饰接收参数）

@PostMapping("/searchDictionary")
public Object searchDictionary(Dictionary dictionary) {
	log.info(dictionary.toString());
	Page<Dictionary> list = dictionaryService.findDictionaryByObject(dictionary);
	return ObjectToResult.getResult(list);
}
1
2
3
4
5
6

function postFetchAction() {
  var formData = new FormData();
  formData.append('value', 'food');
  formData.append('pageSize', 4);
  formData.append('pageNum', 1);

  var options = {
	// 则header 不需要设置 "content-type": "application/json"
	headers: {},
	method: "POST", // *GET, POST, PUT, DELETE, etc.
	mode: "cors", // no-cors, cors, *same-origin,
	body: formData
  };
  fetch("http://localhost:8080/dictionary/searchDictionary", options)
	.then(function(res) {
	  debugger;
	  console.log(res);
	  // 这个函数返回的是接口响应的值，执行后面的then 方法
	  return res.json();
	})
	// 第二个 then 才是获取后台实际返回的结果
	.then(function(response) {
	  debugger;
	  console.log(response);
	});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26