[TOC]
引⼊请求模块 request
import request from ‘@/utils/request’ 提交时发送请求：通过 async 与 await 处理异步操作
// login/index.vue methods: { async onSubmit () { // 1. 表单验证 … // 2. 请求 const { data } = await request({ method: ‘POST’, url: ‘/front/user/login’, data: { phone: this.form.phone, password: this.form.password } }) console.log(data) // 3. 响应处理 } 由于 axios 的请求参数默认为 application/json 格式，⽽接⼝需要 x-www-form-urlencoded 格式， 导致请求参数处理失败
引⼊ qs 模块
// login/index.vue使⽤ qs 模块处理请求参数格式
// login/index.vue … const { data } = await request({ method: ‘POST’, // header 可省略，qs.stringify() 会⾃动设置 headers: { ‘content-type’: ‘application/x-www-form-urlencoded’ }, url: ‘/front/user/login’, data: qs.stringify(this.form) }) console.log(data) …为了便于测试，将data 中的数据默认设置为测试⼿机号和密码，简化操作（实际功能中不需要此步骤）。
// login/index.vue … data () { return { form: { phone: ‘17201234567’, password: ‘111111’ }, … } }, …保存，在浏览器中进⾏测试，请求参数格式设置正确，请求成功。
若有收获，就点个赞吧
0 人点赞
