Ajax学习:使用fetch函数发送AJAX请求

fetch函数是全局对象（可以直接调用），返回的结果是 Promise对象

使用 Fetch - Web API 接口参考 | MDN (mozilla.org)

 fetch() - Web API 接口参考 | MDN (mozilla.org)

服务器部分：

app.all('/fetch',(requset,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*');
	response.setHeader('Access-Control-Allow-Headers','*')
    const data={name:'张三'};
	let str=JSON.stringify(data);//需要转换称为json 否则传递的任然是对象
	//setTimeout(()=>{
		//设置响应体
		response.send(str);//3s之后返回给客户端
	//},3000)
})

			const btn = document.querySelector('button');
			btn.onclick = function() {
				//发送情求 直接使用fetch函数 
				//两个参数 url 可选配置项
				fetch('http://127.0.0.1:8000/fetch', {
					//method: 请求使用的方法
					method: 'POST',
					//请求的头信息
					headers: {
						hello: 'asss'
					},
					//请求的 体 信息
					body: 'a=2&b=5'
				})

			}

 

 

 

 修改url:

		btn.onclick = function() {
				//发送情求 直接使用fetch函数 
				//两个参数 url 可选配置项
				fetch('http://127.0.0.1:8000/fetch?a=10', {
					//method: 请求使用的方法
					method: 'POST',
					//请求的头信息
					headers: {
						hello: 'asss'
					},
					//请求的 体 信息
					body: 'a=2&b=5'
				})

			}

---

响应参数：

				}).then(function(response){//返回的结果是promis对象
				
					console.log(response)
				})

 如何获取响应体：有如下放方法

 使用text方法“

				}).then(function(response) { //返回的结果是promis对象

					return response.text();
				}).then(function(response) { //返回的结果是promis对象
					console.log(response)
				})

 如果服务端返回的是json对象可以使用 response.json();解析json对象，变成对象

	}).then(function(response) { //返回的结果是promis对象

					return response.json();
				}).then(function(response) { //返回的结果是promis对象
					console.log(response)
				})