Axios 是一个基于 Promise 的网络请求库。

安装

npm install axios

引入

<script setup>
import axios from 'axios'
</script>

常用 API

• axios.get(url[, config])

axios.get('/user',{params: {id: 1234,}
})
.then(response => console.log(response))
.catch(error => console.log(error))

• axios.post(url[, data[, config]])

axios.post('/user', {								// datafirstName: 'Fred',lastName: 'Flintstone',},{								// configheaders: {'Content-Type': 'application/json'}}
).then(response => console.log(response))

Vue3 项目中对 axios 封装

新建 utils/request.js 文件

import axios from "axios"
import { ElMessage } from 'element-plus'const service = axios.create({baseURL: '/api',		// url = base url + request urlheaders: {"Content-Type": "application/json",},timeout: 5000,
})// request 拦截器
service.interceptors.request.use(config => {const timestamp = Date.now();if (config.url){config.url += `?timestamp=${timestamp}`}return config
})// response 拦截器
service.interceptors.response.use(response => {const res = response.dataif (res.code !== 200){ElMessage.error(res.message || "Error")return Promise.reject(res)}return res},error => {ElMessage.error(error),return Promise.reject(error)}
)export default service