Axios请求

1.什么是Axios请求

Axios是一个流行的基于Promise的HTTP客户端，它可以用于浏览器和Node.js平台，支持GET、POST、PUT、DELETE等HTTP方法，并且提供了拦截器、取消请求、请求和响应拦截等功能。

2.引入Axios

<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>

3.GET请求

1.请求所有数据

      axios({
          method: 'get',
          url: 'http://localhost:3000/comments'
      }).then(function(res){
          console.log(res.data);
      })

2.请求所有数据和状态码

      axios.get('http://localhost:3000/comments').then(function({data,status}){
          console.log(data,status);
      })

3.请求数据中name1=团宠嫡长女她福运满满的数组

      axios.get('http://localhost:3000/comments?name1=团宠嫡长女她福运满满').then(function(res){
          console.log(res.data);
      })

3.POST添加

添加一个button按钮，点击button按钮在数据库的尾部添加一组数据

      var btn = document.querySelector('button');
      btn.onclick = function(){
          axios.post("http://localhost:3000/comments",{
              img:'http://img.zcool.cn/community/0178e755e14272a801216c1f8c3f9.jpg',
              name1:'123',
              name2:'456'
          }).then(function(res){
              console.log(res);
          })
      }

4.PATCH修改

修改id=2数据中name1的值，更改为李四

      var btn = document.querySelector("button");
      btn.onclick = function () {
        axios({
          method: "patch",
          url: "http://localhost:3000/comments/2",
          data: {
          name1: "李四"
          }
        }).then(function(res) {
          console.log(res);
        });
      };

5.Delete删除

删除id=2的所有值

    var btn = document.querySelector("button");
    btn.onclick = function () {
        axios({
            method:'delete',
            url:"http://localhost:3000/comments/2"
        }).then(function(res){
            console.log(res);
        })
    }

6.拦截器

1.什么是拦截器

在ES6中，拦截器（Interceptor）是一种用于修改Axios请求和响应的机制。通过使用拦截器，我们可以在请求和响应的生命周期中添加额外的逻辑，例如添加自定义标头、添加错误处理程序或记录日志等。

2.请求拦截器

2.1 什么是请求拦截

在Axios中，请求拦截器（Request Interceptor）是一种用于修改Axios请求的机制。通过使用请求拦截器，我们可以在请求发送前添加额外的逻辑，例如添加自定义标头、添加请求日志等。

2.2 代码演示

import axios from 'axios';

// 创建一个axios实例
const instance = axios.create({
  baseURL: 'https://api.example.com',
});

// 添加请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么
    config.headers.Authorization = 'Bearer ' + getToken(); // 添加认证头
    return config;
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 发送请求
instance.get('/users')
  .then((response) => {
    // 处理成功响应
  })
  .catch((error) => {
    // 处理错误响应
  });

在以上示例中，我们使用Axios创建了一个axios实例，并通过interceptors.request.use方法添加了一个请求拦截器。在请求发送之前，我们可以对请求配置进行修改，比如添加认证头。拦截器的第一个参数是一个回调函数，它会在每个请求发送之前被调用，参数config表示当前的请求配置。拦截器的第二个参数是一个回调函数，它会在请求发送失败时被调用，参数error表示错误信息。

在拦截器的回调函数中，你可以根据自己的需求对请求进行修改或处理，比如添加请求头、修改请求参数等。处理完之后，需要将修改后的请求配置对象config返回，以便继续发送请求。如果出现错误，可以使用Promise.reject(error)将错误信息传递给下一个处理错误的回调函数。

当然，Axios还提供了响应拦截器的功能，用于对响应数据或错误进行处理。你可以使用interceptors.response.use方法来添加响应拦截器，用法与请求拦截器类似。

3.响应拦截器

3.1 什么是响应拦截器

在Axios中，响应拦截器（Response Interceptor）是一种用于修改Axios响应的机制。通过使用响应拦截器，我们可以在响应发送后添加额外的逻辑，例如添加自定义标头、添加响应日志等。

3.2 代码演示

import axios from 'axios';
// 创建一个axios实例

const instance = axios.create({

baseURL: 'https://api.example.com',

});


// 添加响应拦截器

instance.interceptors.response.use(

(response) => {

// 对响应数据做些什么

return response;

},

(error) => {

// 对响应错误做些什么

return Promise.reject(error);

}

);


// 发送请求

instance.get('/users')

.then((response) => {

// 处理成功响应

})

.catch((error) => {

// 处理错误响应

});

在以上示例中，我们使用Axios创建了一个axios实例，并通过interceptors.response.use方法添加了一个响应拦截器。在接收到响应数据后，我们可以对响应数据进行处理。拦截器的第一个参数是一个回调函数，它会在每个成功的响应后被调用，参数response表示当前的响应。拦截器的第二个参数是一个回调函数，它会在响应错误时被调用，参数error表示错误信息。

在拦截器的回调函数中，你可以根据自己的需求对响应进行处理，比如解析响应数据、处理错误信息等。处理完之后，需要将响应对象response或错误对象error返回，以便继续传递给下一个处理响应的回调函数或错误处理函数。

需要注意的是，响应拦截器的回调函数中需要返回响应对象或错误对象，否则后续的then或catch方法将无法接收到正确的响应或错误。