一降铸、在utils文件下新建request.js，對axios重新封裝
import axios from 'axios'
import { ElMessage } from 'element-plus'
const TOKEN_INVALID = 'Token認(rèn)證失敗姻僧，請重新登錄'
const NETWORK_ERROR = '網(wǎng)絡(luò)請求異常，請稍后重試'
// 創(chuàng)建axios實例
let service = axios.create({
// baseURL: process.env.BASE_URL || 'prod',
baseURL: 'https://www.fastmock.site/mock/d9e148087bcae80d40622e393a3da21b/api',
timeout: 8000
})
// request攔截器
service.interceptors.request.use(
req => {
const header = req.headers
if (!header.Authorization) header.Authorization = 'test token'
return req
},
error => {
console.log(error)
return Promise.reject(error)
}
)
// respone攔截器
service.interceptors.response.use(
res => {
const { data, statusText } = res
if (res.status === 200) {
return data
} else if (res.status === 40001) {
ElMessage.error(statusText)
}
return Promise.reject(TOKEN_INVALID)
},
error => {
ElMessage.error(error || NETWORK_ERROR)
return Promise.reject(error || NETWORK_ERROR)
}
)
export default service
二、實例使用
import { onMounted } from 'vue';
import service from "@/utils/request";
export default {
name: 'Home',
components: {
},
setup() {
onMounted(() => {
service.post('/user/login', {
username: 'admin',
password: '123456'
}).then(res => {
console.log(res)
})
})
return {
}
}
}
</script>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
