axios的作用及其使用方法

axios的作用及其使用方法

axios是一个基于Promise的HTTP客户端库，用于在浏览器和Node.js中发送和处理HTTP请求和响应。它支持多种请求类型，例如GET、POST、PUT等，还支持设置请求头、拦截请求和响应等操作，是前端发起异步请求的主要工具之一。

使用axios发送HTTP请求的步骤如下：

1. 安装axios：可以使用npm或yarn安装axios库。

npm install axios

2. 导入axios：在需要使用axios的文件中，需要将axios导入进来，并且可以给axios设置默认的配置。

import axios from 'axios'

axios.defaults.baseURL = "http://localhost:8080/api/"
axios.defaults.headers.common["Authorization"] = "Bearer " + localStorage.getItem("token")

3. 发送请求：使用axios发送请求，可以调用axios的各种方法，例如GET、POST、PUT等，还可以设置请求头、请求参数、超时时间等。

axios.get('/user')
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

4. 拦截请求和响应：可以使用axios拦截请求和响应，进行预处理或处理错误信息。

axios.interceptors.request.use(config => {
// 在发送请求之前做些什么
if (localStorage.getItem('token')) {
  config.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token');
}
return config;
}, error => {
// 对请求错误做些什么
return Promise.reject(error);
});

axios.interceptors.response.use(response => {
// 对响应数据做点什么
return response;
}, error => {
// 对响应错误做点什么
return Promise.reject(error);
});

5. 处理响应：在axios的then或catch方法中，可以接收服务器返回的数据，并进行相应的处理。

axios.get('/user')
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

总的来说，axios是一个强大的HTTP客户端库，它可以方便地处理HTTP请求和响应，并可以与许多框架集成，例如Vue.js、React等。在开发中，我们可以根据实际需求选择使用axios的各种方法和选项，以便快速、安全和可靠地进行异步数据传输。