Axios在vue项目中的封装步骤

Axios是一个基于promise的HTTP客户端，可用于在浏览器和Node.js中发送数据请求。在Vue项目中使用Axios进行数据请求可以方便快捷地实现前后端交互。下面我们将介绍Axios在Vue项目中的封装步骤。

1. 安装Axios

打开终端，通过npm安装Axios：

npm install axios

2. 创建Axios服务

在Vue项目中，可以创建一个Axios服务，把Axios的基础配置都设置好，然后在需要发送HTTP请求的地方都调用这个服务来进行请求。在src目录下建立一个services目录，用于保存所有数据请求相关的服务。

在services目录下创建一个axiosService.js文件，我们的Axios服务就写在这里面：

import axios from 'axios';

const axiosService = axios.create({
    baseURL: 'http://localhost:8000', // API服务器地址
    timeout: 10000, // 超时时间
    withCredentials: true, // 允许Cookies
    headers: {
        'Content-Type': 'application/json', // 请求头
        'X-Requested-With': 'XMLHttpRequest' // XMLHttpRequest标识
    }
});

export default axiosService;

这里我们创建了一个名为axiosService的Axios服务，并设置了基础的请求配置，包括API服务器地址、超时时间、是否允许Cookies、请求头、XMLHttpRequest标识等。

3. 封装单个API

为了更方便地进行数据请求，我们可以把每个API都封装成独立的方法，然后通过Axios服务调用相应的API方法来发送HTTP请求。在services目录下创建一个api目录，用于保存所有API相关的方法。

在api目录下创建一个test.js文件，我们封装一个简单的测试API：

import axiosService from '../axiosService';

export function test() {
    return axiosService.get('/test'); // 返回Promise对象
}

这里我们导出了名为test的API方法，并调用了Axios服务的get方法向服务器发送一个/test的请求。

4. 在Vue组件中调用API

在Vue组件中调用API方法，从而发送HTTP请求。在这里我们以HelloWorld.vue为例，在mounted生命周期中调用封装好的test API：

<template>
  <div class="hello">
    <div>{{ response }}</div>
  </div>
</template>

<script>
import { test } from '../services/api/test';

export default {
  name: 'HelloWorld',
  data () {
    return {
      response: ''
    };
  },
  mounted () {
    test().then(res => {
      this.response = res.data;
    }).catch(error => {
      console.log(error);
    });
  }
}
</script>

这里我们引入了名为test的API方法，并在mounted函数中调用它。当收到API成功响应后，将响应数据绑定到视图上。

5. 封装多个API

如果有多个API需要封装，我们可以在api目录下创建多个文件，如test.js、login.js、user.js等。每个API文件中会包含多个API方法，供Vue组件中使用。

import axiosService from '../axiosService';

export function login(username, password) {
    return axiosService.post('/login', { username, password }); // 返回Promise对象
}

export function logout() {
    return axiosService.post('/logout'); // 返回Promise对象
}

export function register(username, password) {
    return axiosService.post('/register', { username, password }); // 返回Promise对象
}

这里我们在login.js文件中封装了三个API方法，分别是login、logout、register。

6. 总结

以上就是Axios在Vue项目中的封装步骤。我们可以在服务层把所有数据请求相关的配置和方法都封装好，然后在Vue组件中调用这些API方法，实现前后端交互。