前端请求后端接口大汇总，让前端不再受委屈！

一、数据放在哪发

在前端开发中，我们需要向后端发送数据，以实现各种功能。那么，数据应该放在哪里发呢？

1. 请求体

请求体是发送给后端的数据。它可以放在HTTP请求的body中，也可以放在URL中。

（1）放在body中

POST /api/users HTTP/1.1
Content-Type: application/json

{
  "name": "张三",
  "age": 20
}

（2）放在URL中

GET /api/users?name=张三&age=20 HTTP/1.1

2. 查询参数

查询参数是附加在URL后面的数据。它通常用于过滤或排序数据。

GET /api/users?name=张三&age=20 HTTP/1.1

3. 路径参数

路径参数是URL的一部分，它用于标识要操作的资源。

GET /api/users/123 HTTP/1.1

二、如何发送数据

1. XMLHttpRequest

XMLHttpRequest是JavaScript内置的对象，用于发送HTTP请求。

var xhr = new XMLHttpRequest();
xhr.open('POST', '/api/users', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
  "name": "张三",
  "age": 20
}));

2. Fetch API

Fetch API是XMLHttpRequest的替代方案，它使用更现代的语法。

fetch('/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    "name": "张三",
    "age": 20
  })
})
.then(function(response) {
  return response.json();
})
.then(function(data) {
  console.log(data);
})
.catch(function(error) {
  console.log(error);
});

3. Axios

Axios是一个第三方库，它可以简化HTTP请求的发送。

axios.post('/api/users', {
  name: "张三",
  age: 20
})
.then(function(response) {
  console.log(response.data);
})
.catch(function(error) {
  console.log(error);
});

三、如何接收数据

后端接口返回的数据通常是JSON格式的。我们可以使用JavaScript的JSON.parse()方法将JSON字符串解析成JavaScript对象。

var data = JSON.parse(xhr.responseText);
console.log(data);

四、如何处理错误

在与后端接口交互时，可能会遇到各种各样的错误。我们可以使用JavaScript的try...catch语句来捕获这些错误。

try {
  var data = JSON.parse(xhr.responseText);
  console.log(data);
} catch (error) {
  console.log(error);
}

五、结语

本文介绍了前端请求后端接口的一些基本知识。希望你看完之后，在和后端对接接口时可以如鱼得水。