在 services ⽬录下创建 user.js ,封装⽤户请求的功能模块。

对⽤户登录接⼝的请求进⾏封装:

// services/user.js import request from ‘@/utils/request’ import qs from ‘qs’ export const login = data => { return request({ method: ‘POST’, url: ‘/front/user/login’, data: qs.stringify(data) }) }

在登录⻚⾯引⼊封装模块并调⽤⽅法。

// login/index.vue // import request from ‘@/utils/request’ // import qs from ‘qs’ // 封装请求模块后,引⼊使⽤ import { login } from ‘@/services/user’ export default { name: ‘LoginIndex’, data () {}, methods: { async onSubmit () { try { /* const { data } = await request({ method: ‘POST’, url: ‘/front/user/login’, data: qs.stringify(this.form) }) */ // 替换为⽅法调⽤,并传⼊数据 const { data } = await login(this.form) } catch (err) { console.log(‘验证失败’, err) } } } } 测试成功,以后将所有接⼝请求都封装在模块中即可。