请求函数的优化
小知识点
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('接口请求失败')
}
};