fetch使用

2023年10月17日约810字预计需要3分钟

fetch

// get
fetch('https://api.example.com/data')
  .then(response => {
    if (response.ok) {
      // 将响应体解析为JSON格式
      return response.json();
    }
    throw new Error('Network response was not ok.');
  })
  .then(data => {
    // 处理获取到的数据
    console.log(data);
  })
  .catch(error => {
    // 处理错误
    console.error('Error:', error);
  });
// post
const requestOptions = {
  method: 'POST', // POST必须
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'aaaa', age: 30 })
};
 
fetch('https://api.example.com/users', requestOptions)
  .then(response => {
    if (response.ok) {
      return response.json();
    }
    throw new Error('Network response was not ok.');
  })
  .then(data => {
    // 处理获取到的数据
    console.log(data);
  })
  .catch(error => {
    // 处理错误
    console.error('Error:', error);
  });

fetch请求配置

请求的配置项，可选参数如下:

method: 请求使用的方法，如GET、POST。
headers: 请求的头信息，形式为Headers的对象或包含ByteString值的对象字面量。
body: 请求的body信息,可能是一个Blob、BufferSource、FormData、URLSearchParams或者USVString对象。
mode: 请求的模式，如cors、no-cors或者same-origin。
credentials: 请求的credentials，如 omit、same-origin或者include。为了在当前域名内自动发送cookie，必须提供这个选项。
cache: 请求的cache模式: default、no-store、reload、no-cache、force-cache或者only-if-cached。
redirect: 可用的redirect模式: follow(自动重定向),error(如果产生重定向将自动终止并且抛出一个错误), 或者manual(手动处理重定向)。
referrer: 一个USVString可以是no-referrer、client或一个URL。默认是 client

fetch响应处理

如果响应成功（状态码为200-299之间），则进行响应处理

json()方法：将响应体解析为JSON格式，并返回一个Promise对象，可以使用.then()方法获取解析后的数据。
text()方法：将响应体解析为纯文本，并返回一个Promise对象。
blob()方法：将响应体解析为二进制数据，并返回一个Promise对象。

fetch缺点

兼容性，部分浏览器不兼容
不支持取消请求。一旦发起，不能中断，也不会超时，只能等待被 resolve 或 reject

XMLHttpRequest

//首先实例化一个XMLHttpRequest对象
var httpRequest = new XMLHttpRequest();

//注册httpRequest.readyState改变时会回调的函数,httpRequest.
//readyState共有5个可能的值,
//0	UNSENT (未打开)	open()方法还未被调用;
//1	OPENED  (未发送)	send()方法还未被调用;
//2	HEADERS_RECEIVED (已获取响应头)	send()方法已经被调用, 响应头和响应状态已经返回;
//3	LOADING (正在下载响应体)	响应体下载中; responseText中已经获取了部分数据;
//4	DONE (请求完成)	整个请求过程已经完毕.
httpRequest.onreadystatechange = function(){
 //该回调函数会被依次调用4次
 console.log(httpRequest.readyState);

 if(httpRequest.readyState===4){
   //请求已完成
   if(httpRequest.status===200){
     //http状态为200
     console.log(httpRequest.response);

     var data = JSON.parse(httpRequest.response);
     console.log(data);
   }
 }

}

//请求的网址
var url = "http://127.0.0.1:7777/list";
//该方法为初始化请求,第一个参数是请求的方法,比如GET,POST,PUT,第二个参数是请求的url
httpRequest.open('GET',url,true);

//设置http请求头
httpRequest.setRequestHeader("Content-Type","application/json");

//发出请求,参数为要发送的body体,如果是GET方法的话，一般无需发送body,设为空就可以
httpRequest.send(null);