【Vue】封装api接口 - 图片验证码接口

**1.目标：**将请求封装成方法，统一存放到 api 模块，与页面分离

2.原因：以前的模式

• 页面中充斥着请求代码

• 可阅读性不高

• 相同的请求没有复用请求没有统一管理

---

3.期望：

• 请求与页面逻辑分离
• 相同的请求可以直接复用请求
• 进行了统一管理

---

4.具体实现

新建 api/login.js 提供获取图形验证码 Api 函数

import request from '@/utils/request'

// 获取图形验证码
// 按需导出
export const getPicCode = () => {
  // 注意必须加return
  return request.get('/captcha/image')
}

login/index.vue页面中调用测试

// 按需导入
// 方法名和methods中的方法名冲突没有关系，这个导入的是一个全局变量，方法名前面没有this
import { getPicCode } from '@/api/login'
async getPicCode () {
  const { data: { base64, key } } = await getPicCode()
  this.picUrl = base64
  this.picKey = key
},