## 集成`axios`
```shell
$ yarn add axios@next
```
## 封裝`axios`
### 新建文件`/src/utils/request.js`，創建axios實例，配置請求攔截、響應攔截
```javascript
import axios from 'axios'
import {publicConfig} from '../utils/config'
import store from '../store'
import {ACCESS_TOKEN} from '../store/mutation-types'
import storage from 'store'
import {ElMessage, ElNotification} from 'element-plus'
// 創建axios實例
const service = axios.create({
// 服務端API地址
baseURL: publicConfig.BASE_API,
// 請求超時時間：25s，大文件需要更長
timeout: 25000
})
// 接口請求攔截
service.interceptors.request.use(config => {
// 讓每個請求攜帶當前用戶token
const token = storage.get(ACCESS_TOKEN)
if (token) {
config.headers['Access-Token'] = token
}
return config
})
// 接口響應攔截
service.interceptors.response.use((response) => {
const result = response.data
// status：正常200；服務器錯誤500；未登錄401；沒權限403
if (result.status === 500) {
ElMessage.error('服務器內部錯誤')
return Promise.reject(result)
}
if (result.status === 401) {
store.dispatch('Logout').then(() => {
ElNotification.error({
title: '溫馨提示',
message: result.message,
duration: 2
})
// 刷新頁面
setTimeout(() => {
window.location.reload()
}, 1200)
})
return Promise.reject(result)
}
// 200、403
return result
}, (error) => {
// 網絡請求出錯
const errMsg = ((error.response || {}).data || {}).message || '請求出現錯誤，請稍后再試'
ElNotification.error({
title: '網絡請求出錯',
message: errMsg,
duration: 2
})
return Promise.reject(error)
})
export {
service as axios
}
```
