MENU

【笔记】Vue 项目 封装 axios 以增强复用性

2021 年 09 月 09 日 • 阅读: 171 • 笔记

前言

这里记录一下封装 axios 模块以增强复用性的过程,以备以后忘记时使用。

为什么要封装 axios

我们在写 Vue 项目时,难免会频繁使用 axios 来进行网络请求获取数据。
那么每一次我们使用 axios 进行网络请求就需要写很长的代码。
如果我们将 axios 封装成一个模块并配置 baseURL 属性,每次我们进行请求时,首先引入这个模块,创建一个实例,那么我们只需要传给这个实例一个相对路径及相关的请求参数即可大大减少代码量。

封装 axios 为 request.js 模块步骤

创建文件及目录

  1. 在 /src/ 目录下创建 utils 目录,以存放各类工具
  2. 在 /src/utils/ 目录下创建 request 目录,以存放封装的 axios 模块
  3. 在 /src/utils/request/ 目录下创建 request.js 文件
  4. 在 /src/ 目录下创建 api 目录,以存放接口文件
  5. 在 /src/api/ 目录下创建 getBookAPI.js 文件

request.js

这个文件用于解决每次请求都需要输入很长的请求 url 等,主要是对 axios 进行了配置。

代码:

// 导入 axios
import axios from 'axios'

const request = axios.create({
  // baseURL请求地址的 url 根路径
  // 这样写的话引入这个模块的接口必须填以根路径为当前路径的相对路径
  baseURL: 'http://www.liulongbin.top:3006'
})

// 默认导出 request
export default request

getBookAPI.js

这个文件用于使用配置过 baseURL 的 request.js 返回一个 Ajax 的 Promise 实例对象。
组件内部通过引入这个文件并传参即可进行网络请求,而且增强了 axios 的复用性

代码:

// 导入 axios 封装的 request.js 模块
import request from '../utils/request.js/request.js'

// 向外按需导出一个 API 函数
// 函数里的参数便是传进来的
// 实际请求地址为:http://www.liulongbin.top:3006/api/getbooks?id=1
export const getBookAPI = function(parameter) {
  return request.get('/api/getbooks', {
    params: {
      id: parameter
    }
  })
}

页面组件 App.vue

这个文件引入 getBookAPI 即可进行请求,不需要引入 axios 或者 request.js,写法简单,极大地增强 axios 复用性

HTML 代码部分:

<template>
  <div class="app-container">
    <p>res: {{ data }}</p>
    <button @click="get">BTN</button>
  </div>
</template>

JS 代码部分:

<script>
import { getBookAPI } from './api/getBookAPI.js'
export default {
  name: 'App',
  data() {
    return {
      data: ''
    }
  },
  methods: {
    async get() {
      // {{ data:res }} 是将 getBookAPI 返回的 Promise 实例的 data 值解构赋值给 res
      // getBookAPI 返回一个 Promise 实例,使用 await 可以直接获取 Promise 实例结果的 data 节点
      const { data: res } = await getBookAPI(2)
      console.log(res)
      this.data = res
    }
  }
}
</script>

原理

我们在 /src/utils/request/ 中创建 request.js ,文件中导入 axios 并配置 axios 的 baseURL 属性,以使我们在进请求时不用写很长的请求 url 。

我们在 /src/api/ 中创建 getBookAPI.js ,文件中导入 request.js 使用 request.js 中 axios 的配置进行请求,这里 return 一个 ajax 请求的 Promise 实例,方便组件中使用 async await 进行对 Promise 简化,进一步简化代码。

同时,导出的函数设定参数,允许组件在使用 api 接口时传参,进一步增强 api 接口复用性。

我们在页面组件中,只需导入 getBookAPI.js 即可进行网络请求,因为 getBookAPI.js 已经导入 request.js 且 request.js 也导入了 axios 所以我们既不需要导入 axios 也不不需要导入 request.js

返回文章列表 文章二维码
本页链接的二维码
打赏二维码