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>
~~~
