axios中文网站:axios-http.com/zh/
一、安装axios
npm install axios --save
二、配置axios,添加拦截器
在src目录下新建一个request文件夹,在里面新建index.ts(或者.js)文件,编辑代码如下:
import axios from 'axios'
const service = axios.create({
baseURL: '/api',
timeout: 60000,
withCredentials: true,
headers: {
'Content-Type': 'application/json',
'token': 'your token',
'X-Requested-With': 'XMLHttpRequest',
},
})
service.interceptors.request.use(
function (config) {
return config
},
function (error) {
console.log(error)
return Promise.reject(error)
}
)
service.interceptors.response.use(
function (response) {
console.log(response)
const dataAxios = response.data
const code = dataAxios.reset
return dataAxios
},
function (error) {
console.log(error)
return Promise.reject(error)
}
)
export default service
三、使用axios发送请求
在src目录下新建一个apis文件夹,这里面放入今后所有的请求文件,例如新建一个请求用户信息的接口user.ts,代码如下:
import httpRequest from '@/request/index'
interface UserInfoParam {
userID: string,
userName: string
}
export function apiGetUserInfo(param: UserInfoParam) {
return httpRequest({
url: 'your api url',
method: 'post',
data: param,
})
}
接着在具体业务页面里使用这个请求,例如:
<script setup lang="ts">
import { onMounted } from 'vue'
import { apiGetUserInfo } from '@/apis/user'
function getUserInfo() {
const param = {
userID: '10001',
userName: 'Mike',
}
apiGetUserInfo(param).then((res) => {
console.log(res)
})
}
onMounted(() => {
getUserInfo()
})
</script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)