axios的安装和使用

偏执的太偏执、 2024-03-22 14:19 47阅读 0赞

#### 目录 ####

*  安装
 *  使用

Axios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 Node.js。

**优点：**

支持Promise API：Axios使用Promise API来处理异步请求，从而使得代码更加简洁和易于理解。

支持浏览器和Node.js：Axios可以在浏览器和Node.js平台上使用，从而实现了跨平台的HTTP请求。

支持请求拦截和响应拦截：Axios提供了请求拦截和响应拦截的功能，可以在请求和响应的过程中对数据进行加工和处理。

支持取消请求：Axios支持取消请求的功能，可以通过cancel token来实现取消请求的操作。

支持跨站点请求伪造（CSRF）保护：Axios可以自动处理CSRF保护，从而保证应用程序的安全性。

## 安装 ##

使用 npm 或 yarn 安装 Axios：

npm install axios
    
    # 或者
    
    yarn add axios

## 使用 ##

安装Axios：通过npm或者yarn来安装Axios依赖：

npm install axios --save

**创建Axios实例**：使用Axios.create()方法来创建一个Axios实例，并设置默认的配置参数：

import axios from 'axios';
    
    const instance = axios.create({
        
      baseURL: 'http://localhost:8080',
      timeout: 10000,
      headers: {
        
        'Content-Type': 'application/json'
      }
    });

其中，baseURL参数表示请求的基础URL地址，timeout参数表示请求的超时时间，headers参数表示请求的默认请求头。

**发送HTTP请求**：使用Axios实例的get、post、put、delete等方法来发送HTTP请求：

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

其中，get方法表示发送一个GET请求，response.data表示响应的数据，error表示请求的错误信息。

**处理请求拦截和响应拦截**：使用Axios实例的interceptors属性来处理请求拦截和响应拦截：

instance.interceptors.request.use(config => {
        
      // 在发送请求之前做些什么
      return config;
    }, error => {
        
      // 对请求错误做些什么
      return Promise.reject(error);
    });
    
    instance.interceptors.response.use(response => {
        
      // 对响应数据做些什么
      return response;
    }, error => {
        
      // 对响应错误做些什么
      return Promise.reject(error);
    });

其中，interceptors.request.use方法表示请求拦截器，interceptors.response.use方法表示响应拦截器。

通过以上步骤，完成使用Axios来发送HTTP请求，并处理请求拦截和响应拦截等操作。