一、安装axios
npm i axios -s
二、配置与封装
src
Ⅼaixos
Ⅼrequest.js
Ⅼhttp.js
主要参考了这篇优秀的博文:
- 版权声明:博主「jcat_李小黑」的原创文章
原文链接:https://blog.csdn.net/weixin_43216105/article/details/98877960
import axios from 'axios'
import { ElMessage } from 'element-plus'
const service = axios.create({
baseURL: process.env.BASE_API,
timeout: 3 * 1000
})
service.interceptors.request.use(config => {
config.data = JSON.stringify(config.data);
config.headers = {
'Content-Type':'application/json'
}
return config
}, error => {
Promise.reject(error)
})
service.interceptors.response.use(response => {
return response
}, error => {
if (error && error.response) {
switch (error.response.status) {
case 400:
error.message = '错误请求'
break;
case 401:
error.message = '未授权,请重新登录'
break;
case 403:
error.message = '拒绝访问'
break;
case 404:
error.message = '请求错误,未找到该资源'
window.location.href = "/NotFound"
break;
case 405:
error.message = '请求方法未允许'
break;
case 408:
error.message = '请求超时'
break;
case 500:
error.message = '服务器端出错'
break;
case 501:
error.message = '网络未实现'
break;
case 502:
error.message = '网络错误'
break;
case 503:
error.message = '服务不可用'
break;
case 504:
error.message = '网络超时'
break;
case 505:
error.message = 'http版本不支持该请求'
break;
default:
error.message = `连接错误${error.response.status}`
}
} else {
if (JSON.stringify(error).includes('timeout')) {
ElMessage.error('服务器响应超时,请刷新当前页')
}
error.message = '连接服务器失败'
}
ElMessage.error(error.message)
return Promise.resolve(error.response)
})
export default service
import request from './request'
const http ={
get(url,params){
const config = {
method: 'get',
url:url
}
if(params) config.params = params
return request(config)
},
post(url,params){
const config = {
method: 'post',
url:url
}
if(params) config.data = params
return request(config)
},
put(url,params){
const config = {
method: 'put',
url:url
}
if(params) config.params = params
return request(config)
},
delete(url,params){
const config = {
method: 'delete',
url:url
}
if(params) config.params = params
return request(config)
}
}
export default http
三、引入与使用
main.js 引入
import { createApp } from 'vue'
import App from './App.vue'
import http from './axios/http'
const app = createApp(App)
app.config.globalProperties.http = http
其他组件中使用
import {getCurrentInstance} from 'vue'
export default {
name: 'XXX',
setup(props, context){
const cxt = getCurrentInstance()
const {Bus,http} = cxt.appContext.config.globalProperties
http.get('/api/articles', {keyword: '你好世界!'}).then((res)=>{
})
return {
}
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)