详解vue axios二次封装

下面是“详解vue axios二次封装”的完整攻略。

一、为什么需要封装axios？

在Vue应用中发起网络请求，一般会选择使用axios库。因为axios具有一系列强大的功能，比如：支持Promise，支持取消请求，拦截请求和响应，自动转换JSON格式等。但是，如果我们直接使用axios，会有一些不方便的地方，比如：每个请求都需要设置baseUrl、每个请求需要单独处理请求成功和请求失败情况等。因此，我们需要对axios进行二次封装，以便对响应结果进行统一处理，减少代码冗余，提高开发效率。

二、二次封装axios的方法

1. 创建api文件夹

在项目中创建一个api文件夹，用于存放所有的网络请求。然后在api文件夹中创建一个index.js文件，用于导入和导出所有的网络请求。

2. 封装请求方法

在api文件夹中，我们可以根据不同的接口创建对应的网络请求方法。这些方法应该使用axios进行封装，并且需要返回Promise对象。除此之外，我们还可以在这些方法中进行一些公共处理，比如：设置请求的baseUrl，添加请求头等。

下面是一个简单的网络请求方法示例：

import axios from 'axios';

const request = axios.create({
  baseURL: 'http://localhost:8080',
  timeout: 10000,
});

function getBooks() {
  return request.get('/books');
}

export { getBooks };

在这个示例中，我们使用axios.create方法创建了一个axios实例，然后使用这个实例发送了一个GET请求。这个方法将返回一个Promise对象，我们可以在Vue组件中使用async/await或then/catch来处理请求结果。

3. 处理响应结果

封装网络请求方法只是第一步，还需要对响应结果进行一些处理。在一个完整的请求流程中，响应结果可能会包含请求状态码、请求错误信息、请求返回数据等信息，我们需要对这些信息进行统一处理，并且将处理结果返回给上层Vue组件。

下面是一个处理响应结果的示例：

function handleResponse(response) {
  if (response.status === 200) {
    return response.data;
  } else {
    const errorMessage = `请求失败：${response.statusText}`;
    throw new Error(errorMessage);
  }
}

async function getBooks() {
  try {
    const response = await request.get('/books');
    const data = handleResponse(response);
    return data;
  } catch (error) {
    console.error(error);
  }
}

export { getBooks };

在这个示例中，我们编写了一个handleResponse方法，用于处理响应结果。如果请求成功，这个方法将返回响应数据；如果请求失败，这个方法将抛出一个包含错误信息的Error对象。我们在getBooks方法中调用了handleResponse方法，确保返回值是数据而不是响应对象。在实际使用中，我们可以对handleResponse方法进行进一步封装，比如：对请求错误信息进行处理，对请求超时进行处理等。

三、示例说明

接下来，我们通过两个示例详细说明如何使用封装好的axios请求api。

1. 示例一——在Vue组件中使用api

在这个示例中，我们假设我们需要在一个Vue组件中获取所有的书籍信息，并将这些书籍信息渲染到页面上。我们可以使用之前封装好的getBooks方法来获取这些信息。

在Vue组件中，我们可以这样使用api：

<script>
import { getBooks } from '@/api';

export default {
  data() {
    return {
      books: [],
    };
  },
  mounted() {
    this.loadBooks();
  },
  methods: {
    async loadBooks() {
      try {
        this.books = await getBooks();
      } catch (error) {
        console.error(error);
      }
    },
  },
};
</script>

<template>
  <ul>
    <li v-for="book in books" :key="book.id">{{ book.title }}</li>
  </ul>
</template>

在这个示例中，我们首先导入了之前封装好的getBooks方法。然后，在Vue组件的mounted生命周期中调用了loadBooks方法，该方法使用async/await对getBooks方法进行调用。如果请求成功，loadBooks方法将会将响应的书籍信息赋值给组件的books属性，然后将books属性渲染到列表中。如果请求失败，loadBooks方法将会打印错误信息。

2. 示例二——进行表单提交

在这个示例中，我们假设我们需要通过表单提交一个新的书籍信息。我们可以使用之前封装好的postBook方法来完成这个功能。

在Vue组件中，我们可以这样使用api：

<script>
import { postBook } from '@/api';

export default {
  data() {
    return {
      bookTitle: '',
      bookAuthor: '',
    };
  },
  methods: {
    async submitBook() {
      try {
        const book = {
          title: this.bookTitle,
          author: this.bookAuthor,
        };
        await postBook(book);
        this.bookTitle = '';
        this.bookAuthor = '';
      } catch (error) {
        console.error(error);
      }
    },
  },
};
</script>

<template>
  <form @submit.prevent="submitBook">
    <input type="text" v-model="bookTitle" placeholder="请输入书籍名称" />
    <input type="text" v-model="bookAuthor" placeholder="请输入作者名称" />
    <button type="submit">提交</button>
  </form>
</template>

在这个示例中，我们首先导入了之前封装好的postBook方法。然后，我们在Vue组件的submitBook方法中创建一个包含书籍信息的对象，然后将这个对象用作postBook方法的参数进行调用。如果请求成功，submitBook方法将会将bookTitle和bookAuthor属性清空，然后提示用户添加书籍成功。如果请求失败，submitBook方法将会打印错误信息。

四、总结

axios是一个非常强大的网络请求库。通过对axios进行二次封装，我们可以进一步提高开发效率，减少代码冗余，并且让API的使用更加方便。在Vue应用中，我们可以将所有的网络请求集中放置到api文件夹中，便于管理和维护。同时，我们还需要对于响应结果进行统一处理，确保请求成功时返回数据，请求失败时抛出错误。这样做不仅有利于代码复用，还有利于开发效率的提升。