vue项目 API接口封装

vue项目 API接口封装

01.基础配置创建

• 分别创建如下文件和文件夹

Object
│  .env.development
│  .env.production
└─src
    ├─api
    │      index.js
    │      login.js
    ├─utils
    │      request.js
1
2
3
4
5
6
7
8
9

• .env.development 和 .env.production 配置生产环境和开发环境移步：项目api环境配置

02. axios 简单配置

• 因为这里主要做 api 的封装 axios就不做二次封装了
• utils>request.js

import axios from 'axios'
const service = axios.create({
  // 基准 api 地址
  baseURL: process.env.VUE_APP_API_URL,
  timeout: 8000
})
// 请求拦截
service.interceptors.request.use(
  (config) => {
    return config},
   (error) => {return Promise.reject(error)
  }
)
// 请求响应
service.interceptors.response.use(
  (response) => {
  	return response},
  	(error) => {return Promise.reject(error)
  }
)
export default service
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

03.封装api

• api>login.js

import axios from '@/utils/request' 

const login = {
  // 1. post
  signIn: (data) =>
    axios({
      url: '/login',
      method: 'post',
      data
    }),
  // 2.get
  getData: (params) =>
    axios({
      url: '/userList',
      method: 'get',
      params
    })
}

export default login
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

• api>index.js 该文件作为 一个 API 总管理处 当api接口过多时不同文件对应不同的api类型和模块

// 导出API对象
import login from './login'
class API {
  constructor() {
    this.login = login
  }
}
export default new API()

1
2
3
4
5
6
7
8
9

使用

<script setup>
import axios from 'axios'

let username = admin;
let password = 123456;

let { data: res } = await API.login.signIn({ username, password })
console.log(res)

</script>
1
2
3
4
5
6
7
8
9
10

over

• api的封装根据项目接口数量和模块进行合理封装
• 当前把所有的api接口 在一次的导入到 index.js 中进行管理 已经过于 复杂了
• 当然如果你不嫌麻烦可以在一次 的把封装好的api挂载到vue原型上 有利有弊
  
• 需要注意的是 vue2 和vue3 的全局挂载是不一样的 移步 vue3如何全局挂载 对象 方法