1. 安装 Axios
~~~text
npm i axios
~~~
2.配置 Axios
> 为了使项目的目录结构合理且规范，我们在`src`下创建`utils`目录来存储我们常用的工具函数。
Axios 作为 HTTP 工具，我们在`utils`目录下创建`axios.ts`作为 Axios 配置文件：
~~~text
import Axios from 'axios'
import { ElMessage } from 'element-plus'
const baseURL = 'https://api.github.com'
const axios = Axios.create({
baseURL,
timeout: 20000 // 请求超时 20s
})
// 前置拦截器（发起请求之前的拦截）
axios.interceptors.request.use(
(response) => {
/**
* 根据你的项目实际情况来对 config 做处理
* 这里对 config 不做任何处理，直接返回
*/
return response
},
(error) => {
return Promise.reject(error)
}
)
// 后置拦截器（获取到响应时的拦截）
axios.interceptors.response.use(
(response) => {
/**
* 根据你的项目实际情况来对 response 和 error 做处理
* 这里对 response 和 error 不做任何处理，直接返回
*/
return response
},
(error) => {
if (error.response && error.response.data) {
const code = error.response.status
const msg = error.response.data.message
ElMessage.error(`Code: ${code}, Message: ${msg}`)
console.error(`[Axios Error]`, error.response)
} else {
ElMessage.error(`${error}`)
}
return Promise.reject(error)
}
)
export default axios
~~~
3.使用axios
~~~text
<template></template>
<script lang="ts">
import { defineComponent } from 'vue'
import axios from '../utils/axios'
export default defineComponent({
setup() {
axios
.get('/users/XPoet')
.then((res) => {
console.log('res: ', res)
})
.catch((err) => {
console.log('err: ', err)
})
}
})
</script>
~~~
