Vue项目实战(3)这是我参与 8 月更文挑战的第 6 天，活动详情查看： 8月更文挑战请求发送引入前面封装好的请求

这是我参与 8 月更文挑战的第 6 天，活动详情查看： 8月更文挑战

请求发送

引入前面封装好的请求模块request
提交时发送请求
- 通过async与await处理异步操作
不懂async与await，请看这篇文章什么是Promise?

// 对验证结果进行处理
    async onSubmit () {
      try {
        // 1.表单验证
        await this.$refs.form.validate()
        // 2.请求 调用request模块
        request({
          method: 'POST',
          url: '/front/user/login',
          data: {
            phone: this.form.phone,
            password: this.form.password
          }
        })
        // 3.响应处理
      } catch (err) {
        console.log('验证失败', err)
      }
    }

请求参数处理失败：由于axios的请求参数默认为application/json格式，而接口需要x-www-form-urlencoded格式。
- 控制台查看后端返回的错误提示信息
- 控制台查看发送数据和请求头信息
补充：urlencoded格式 -> 名=值&名=值

解决方法：手动较为麻烦，可以借助模块处理

根据接口需要将axios的请求参数格式进行转换，操作方式可以在axios文档中查看。这里使用qs模块进行处理，首先通过npm安装qs模块

实现代码

// 对验证结果进行处理
  async onSubmit () {
    try {
      // 1.表单验证
      await this.$refs.form.validate()
      // 2.请求 调用request模块
      request({
        method: 'POST',
        // header可省略，qs.stringify会自动设置
        url: '/front/user/login',
        // 转换为urlencoded格式
        data: qs.stringify(this.form)
      })
      // 3.响应处理
    } catch (err) {
      console.log('验证失败', err)
    }
  }

qs模块使用

小技巧：为了方便测试，可以将data中的数据设置为测试手机和密码，简化操作。

请求结果处理

根据接口文档中提供的自定义状态码判断，除了1或200为成功，其余均为失败。
- 成功时跳转后台首页/home - this.$router.push()
- 失败时进行提示
实际代码

// 3.响应处理
// 失败时的提示
if (data.status !== 1) {
  return alert(data.message)
}
// 成功时跳转到首页
this.$router.push({
  name: 'home'
})

通过Element的message消息提示组件进行错误提示美化
- Element除了提供组件之外，还给Vue实例提供了一些方法，通过方法可以触发功能
- 使用message组件中的 $message.error()与$ message.success()
实际代码

// 3.响应处理
// 失败时的提示
if (data.status !== 1) {
  return this.$message.error(data.message)
}
// 成功时跳转到首页
this.$router.push({
  name: 'home'
})
this.$message.success(data.message)

避免重复请求

当请求速度较慢时（网速慢），如果多次点击登录按钮会导致重复触发请求，无意义
解决方法
- 在请求期间禁止登录按钮点击事件,设置变量用boolean值控制
- 通过Element中Button组件的“加载中loading”功能设置即可
实际代码

// 对验证结果进行处理
    async onSubmit () {
      try {
        // 1.表单验证
        await this.$refs.form.validate()
        // 2.请求 调用request模块
        // 发送请求前设置按钮加载中
        this.isLoginLoading = true
        const { data } = await request({})
        // 取消加载中状态
        this.isLoginLoading = false
        // 3.响应处理
      } catch (err) {
        console.log('验证失败', err)
      }
    }

封装请求方法

在service目录下创建user.js,封装用户请求的功能模块
对用户登录接口的请求进行封装

// 封装用户请求模块
import request from '@/utils/request'
import qs from 'qs'

// data 需要传递的数据
export const login = data => {
    return request({
      method: 'POST',
      // header可省略，qs.stringify会自动设置
      url: '/front/user/login',
      // 转换为urlencoded格式
      data: qs.stringify(data)
    })
}

在登录页面引入封装模块并调用方法

// 引入封装用户登录请求模块
import { login } from '@/services/user'
export default {
  // 导出当前组件的配置对象
  name: 'LoginIndex',
  data () {},
  methods: {
    // 对验证结果进行处理
    async onSubmit () {
      try {
        // 1.表单验证
        await this.$refs.form.validate()
        // 2.请求 调用request模块
        this.isLoginLoading = true
        // 替换为方法调用，并传入数据
        const { data } = await login(this.form)
        this.isLoginLoading = false
        // 3.响应处理
      } catch (err) {
        console.log('验证失败', err)
      }
    }
  }
}

测试成功，以后将所有接口请求都封装在模块中即可