请求函数的优化

请求函数的优化

小知识点

result?.data?. errno === 0 如何理解呢？

如果使用result.data.errno，如果result对象中没有data属性，那么再获取errno时，代码会报错。

但是如果使用result?.data?. errno === 0，如果没有data属性，那么再获取errno时，代码不会报错，会返回undefined

请求函数代码版本1（利用try…catch…)

    const handleLogin = async () => {
      // try catch 保证当接口请求失败的时候会进入到catch里面进行相应的提示。可以保证及时的提示错误
      try{
          const result = await axios.post('https://www.fastmock.site/mock/ae8e9031947a302fed5f92425995aa19/jd/api/user/login', {
          username: data.username,
          password: data.password
        })
        // console.log(result);
        if (result?.data?.errno === 0) {
          localStorage.isLogin = true;
          router.push({ name: 'home' })
        } else {
          this.$message({
            type: error,
            message: '用户名或者密码错误'
          })
        }
      } catch (e) {
        alert('接口请求失败')
      }
    };

将post封装起来

建立一个request.js文件

import axios from "axios"
export const post = (url, data = {}) => {
  return new Promise((resolve, reject) => {
    axios.post(url, data, {
      baseURL: 'https://www.fastmock.site/mock/ae8e9031947a302fed5f92425995aa19/jd',
      headers: {
        "Content-Type": 'application/json',
      }
    }).then((response) => {
      resolve(response)
    }, error => {
      reject(error)
    })
  })
}

文件里面就直接请求/api/user/login就可以了。

import {post} from '../../utils/request'
import { reactive } from 'vue';
export default {
  name: "login",
  setup() {
    const data = reactive({
      username: '',
      password: ''
    });
    const router = useRouter();
    const handleLogin = async () => {
      try{
          const result = await post('/api/user/login', {
          username: data.username,
          password: data.password
        })
        // console.log(result);
        if (result?.data?.errno === 0) {
          localStorage.isLogin = true;
          router.push({ name: 'home' })
        } else {
          this.$message({
            type: error,
            message: '用户名或者密码错误'
          })
        }
      } catch (e) {
        alert('接口请求失败')
      }
    };