vue项目 API接口封装

01.基础配置创建

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

Object
│  .env.development
│  .env.production
└─src├─api│      index.js│      login.js├─utils│      request.js

• .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

03.封装api

• api>login.js

import axios from '@/utils/request' const login = {// 1. postsignIn: (data) =>axios({url: '/login',method: 'post',data}),// 2.getgetData: (params) =>axios({url: '/userList',method: 'get',params})
}export default login

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

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

使用

over

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