1.fetch #

• Fetch API是一个现代的、更强大、更灵活的网络请求API，它提供了一个全局的fetch()方法来执行网络请求
• 这个方法返回一个Promise，代表了一次HTTP请求的结果
• fetch()函数的参数如下：
  • 第一个参数是请求的URL
  • 第二个参数是一个配置对象，包括了各种请求设置，例如：
    • method: HTTP方法，如"GET"、"POST"、"PUT"、"DELETE"等
    • headers: 一个包含HTTP头信息的对象
    • body: 请求的主体,只有在方法是"POST"、"PUT"或者"DELETE"时，这个属性才会被用到

2. 发送请求 #

2.1 创建一个新用户(POST请求) #

fetch('http://localhost:3000/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({name: 'New User', age: 20})
})
.then(response => {
  if (!response.ok) {
    throw new Error('HTTP error ' + response.status);
  }
  return response.text();
})
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

2.2 更新用户信息(PUT请求) #

fetch('http://localhost:3000/users?id=1', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({name: 'Updated User', age: 21})
})
.then(response => {
  if (!response.ok) {
    throw new Error('HTTP error ' + response.status);
  }
  return response.text();
})
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

2.3 查询用户信息(GET请求) #

fetch('http://localhost:3000/users?id=1')
.then(response => {
  if (!response.ok) {
    throw new Error('HTTP error ' + response.status);
  }
  return response.text();
})
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

2.4 删除用户(DELETE请求) #

fetch('http://localhost:3000/users?id=1', {
  method: 'DELETE'
})
.then(response => {
  if (!response.ok) {
    throw new Error('HTTP error ' + response.status);
  }
  return response.text();
})
.then(data => console.log(data))
.catch(error => console.error('Error:', error));