Axios请求库

一、什么是Axios

Axios是一个常用的 JavaScript HTTP 请求库，因其易用性和强大的功能，在前端开发中得到了广泛应用，特别是在与 RESTful API 交互的单页面应用（SPA）中。使用 Axios 可以简化 HTTP 请求的发送和处理，使得与后端服务的交互更加直接和高效。

二、Axios如何发请求

2.1 使用npm或者yarn包管理工具安装axios

npm install axios
// 或
yarn add axios

2.2 基本的四大请求 

基于链式编写的方式，基本的写法都是按照axios.get/post/delete/put.then().catch()这样的写法去写的，在对应的回调函数中我们可以去处理接收的响应对象。then()为成功响应并接收到服务端传递过来的json对象，catch()为我们捕捉到的错误信息。

1：发送GET请求

axios.get('https://example.com/api/data')
 .then(response => {
    // 成功时的处理逻辑
    console.log(response.data); // 响应的数据
    console.log(response.status); // 响应的状态码
    console.log(response.statusText); // 状态码的文本描述
    console.log(response.headers); // 响应的头信息
  })
 .catch(error => {
    // 错误处理逻辑
    if (error.response) {
      // 请求已发出，但服务器响应的状态码不在 2xx 范围内
      console.error(error.response.data);
      console.error(error.response.status);
      console.error(error.response.headers);
    } else if (error.request) {
      // 请求已发出，但没有收到响应
      console.error(error.request);
    } else {
      // 发生了其他错误，设置请求时出错
      console.error('Error', error.message);
    }
  });

2： 发送POST请求

axios.post('https://example.com/api/submit', {
  key1: 'value1',
  key2: 'value2'
})
 .then(response => {
    // 处理成功响应
  })
 .catch(error => {
    // 处理错误
  });

其中，key1,key2的键值对，代表我们所提交的数据对象。

3：发送DELETE请求 

axios.delete('https://example.com/api/delete-item?id=1')
 .then(response => {
    // 处理成功响应
  })
 .catch(error => {
    // 处理错误
  });

4：发送PUT请求 

axios.put('https://example.com/api/update', {
  // 要更新的数据
})
 .then(response => {
    // 处理成功响应
  })
 .catch(error => {
    // 处理错误
  });

2.3  以对象形式发送请求

axios还提供了另外一种发送请求的方式，区别于上面以.get/.post/.delete/.put等方式，axios还能以对象配置的方式发请求。

区别主要在于，我们可以直接写一个对象，指定method（请求方式），url（请求路径），data（数据对象，通常是post/put所提交的对象），headers（请求头），timeout（请求超时时间），

随后，跟上述方式一样，在then里面处理接收到的对象，catch捕捉错误处理。

axios({
  method: 'POST', // 请求方法，如 'GET', 'POST', 'PUT', 'DELETE' 等
  url: 'https://example.com/api/submit', // 请求的 URL
  data: { // 要发送的数据，如果是 POST、PUT 等请求通常放在这里
    key1: 'value1',
    key2: 'value2'
  },
  headers: { // 自定义请求头
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your_token'
  },
  timeout: 5000 // 设置超时时间（毫秒）
})
.then(response => {
  // 成功时的处理逻辑
  console.log(response.data);
})
.catch(error => {
  // 错误处理逻辑
  if (error.response) {
    // 服务器有响应，但状态码不在 2xx 范围内
    console.error(error.response.data);
    console.error(error.response.status);
    console.error(error.response.headers);
  } else if (error.request) {
    // 发送请求但未收到响应
    console.error(error.request);
  } else {
    // 其他错误
    console.error('Error', error.message);
  }
});