vue axios使用及封装

axios是一个基于Promise的HTTP客户端，用于发送请求并处理响应。可以使用它来与后端进行数据交互。

使用axios的步骤如下：

1. 安装axios：可以使用npm或yarn安装axios，命令为：

   npm install axios
   

2. 引入axios：在需要使用axios的地方，使用import语句引入axios模块：

   import axios from 'axios';
   

3. 发送请求：使用axios发送请求，如发送GET请求：

   axios.get('http://example.com/api/data')
     .then(response => {
       // 处理响应
     })
     .catch(error => {
       // 处理错误
     });
   

4. 处理响应或错误：在then回调函数中处理成功响应，在catch回调函数中处理错误。通常会将响应的数据保存到组件的state中，例如：

   axios.get('http://example.com/api/data')
     .then(response => {
       this.setState({ data: response.data });
     })
     .catch(error => {
       console.error(error);
     });
   

这是一个基本的axios使用示例。对于更复杂的情况，可以使用axios提供的其他方法，如POST、PUT、DELETE等。

封装axios的步骤如下：

1. 创建一个api文件夹，并在此文件夹下创建一个api.js文件。api.js文件用于封装axios请求。

   import axios from 'axios';
   
   const instance = axios.create({
     baseURL: 'http://example.com/api', // 设置api请求的基本URL
   });
   
   // 封装GET请求
   export const get = (url, params) => {
     return instance.get(url, { params });
   };
   
   // 封装POST请求
   export const post = (url, data) => {
     return instance.post(url, data);
   };
   
   // 封装PUT请求
   export const put = (url, data) => {
     return instance.put(url, data);
   };
   
   // 封装DELETE请求
   export const del = (url) => {
     return instance.delete(url);
   };
   

2. 在需要使用封装请求的地方，引入api.js文件，并使用封装的方法发送请求。例如：

   import { get, post } from './api';
   
   // 发送GET请求
   get('/data', { id: 1 })
     .then(response => {
       // 处理响应
     })
     .catch(error => {
       // 处理错误
     });
   
   // 发送POST请求
   post('/data', { name: 'John' })
     .then(response => {
       // 处理响应
     })
     .catch(error => {
       // 处理错误
     });
   

通过封装axios请求，可以更方便地发送请求，并对请求进行统一处理，例如添加基本的请求头、处理错误等。