fetch请求格式及中断方法

计算机 > Web 笔记 Web

Created At : 2024-12-25 22:11

Count:637

因为一个fetch请求中断被折磨了好久。

fetch请求格式：

Get请求：

fetch(url, {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => {//响应处理
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
})
.then(data => {//数据处理
  console.log('Success:', data);
})
.catch(error => {//错误处理
  console.error('Error:', error);
});

Post请求：

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)//请求体,用来上传json数据
});

中断方法：

如果fetch请求中断，可以用AbortController来取消请求。

const controller = new AbortController();

fetch(url, {
  signal: controller.signal
});

//需要中断时调用
controller.abort();

fetch的第二个参数是对象，一般可写为options={},对象里添加请求头等参数属性。

也可以直接写为：

fetch(url, {method: 'POST',headers: {'Content-Type': 'application/json'},
signal: controller.signal});//是的，这样我就明白了，常规写法不过是换行了。

signal在options对象中应当放在headers对象之后而不是header当中，也就是说它是请求部分传递的参数。

如果写成{options,signal},这样就会报错。

fetch(url, {
  method: 'POST',
  headers: {    
    'Content-Type': 'application/json'
  },
  signal: controller.signal//在header外面
});

signal被触发后响应的事件可以这么写：

let abortornot;
signal.addEventListener('abort',
  () => abortornot=true//可以添加其他响应事件
);

关于javascript的()=>语法，它是一个箭头函数，箭头函数提供了一种更简洁的函数定义方式，特别适用于那些需要匿名函数的场景，比如回调函数、事件处理程序等。箭头函数不仅语法更简洁，而且它不会创建自己的 this 上下文，而是捕获其所在上下文的 this 值。

this.value = 1;
const myFunc = () => {
  console.log(this.value);// 1, 而不是 undefined
};

另外，fetch请求是异步的，也就是说，它不会阻塞主线程，而是返回一个 Promise 对象，当响应返回时，Promise 对象会被解析，并调用相应的 then() 或 catch() 方法。

有些语法只有在异步请求里才可以用，比如在 then() 方法里的箭头函数，因为 then() 方法里的回调函数是在异步请求完成后才执行的。

try{…}catch{…}finally{…}是用来处理请求的错误的，它可以用来捕获异步请求的错误，并在请求完成后执行一些清理工作，这个方法也可用于同步。

此方悬停