vue3 axios使用 配置
1. 第一步肯定是安装 axios： npm install axios --save
2. 创建一个文件输出axios，我这里在src下创建的utils/util.js
3. util.js
import axios from 'axios'
const url = process.env.NODE_ENV==='production'? 'http://xxxx.com(线上地址)' : 'http://www.xiongmaoyouxuan.com/api'
const $http = axios.create({
baseURL: url, // 所有的请求地址前缀部分
timeout: 60000, // 请求超时时间毫秒
withCredentials: true, // 异步请求携带cookie
headers: {
// 设置后端需要的传参类型
'Content-Type' : 'application/x-www-form-urlencoded'
},
})
// 添加请求拦截器
$http.interceptors.request.use(
function (config) {
// 设置加载进度
return config
},
function (error) {// 发送失败
return Promise.reject(error)
}
)
// 添加响应拦截器
$http.interceptors.response.use(
function (response) {
// 关闭加载进度
return response
},
function (error) {
return Promise.reject(error)
}
)
const $get = function(url,param,fn){ // get方法
$http.get(url,{params:param}).then(function(res){
fn(res.data)
}).catch(function(err){
console.log(err)
})
}
const $post = function(url,param,fn){ // post方法
this.$http.post(url,{params:param}).then(function(res){
fn(res.data)
}).catch(function(err){
console.log(err);
})
}
export{$get, $post,} // 导出方法
4. 页面使用 util.js
<template>
<div class="aa">
aa
</div>
</template>
<script>
import {onMounted} from 'vue'
import {$get} from '../../../utils/util'
export default {
setup() {
const getTest = () => {
$get(
"/tabs?sa=",
{},
res => {
console.log('测试', res)
}
)
}
onMounted(() => {
getTest()
})
return {}
},
}
</script>
<style scoped>
</style>
