数据请求 Axios

VUE3】搭建项目准备工作
中文文档

1. 安装命令

npm install axios

2. 新建 utils/request.js 文件, 创建实例和拦截器

import { useUserStore } from '@/stores/index'
import axios from 'axios'
import { ElMessage } from 'element-plus'

// 初始化实例
const apiSever = axios.create({
  baseURL: '',
  timeout: 100000
})

// 添加请求拦截器
apiSever.interceptors.request.use(
  config => {
    // 请求发送前获取 本地存储的 token
    const userStore = useUserStore()
    if (userStore.token) {
      config.headers.Authorization = userStore.token
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 添加响应拦截器
apiSever.interceptors.response.use(
  response => {
    //业务请求成功
    if (response.data.status == 0) {
      return response
    }
    // 业务请求失败,弹框提示
    ElMessage({ message: response.data.message || '数据获取失败', type: 'error' })
    return Promise.reject(response.data)
  },
  error => {
    ElMessage({ message: '服务器异常', type: 'error' })
    return Promise.reject(error)
  }
)

// 导出实例
export default apiSever

3. 新建具体业务请求 api / article.js

ad00a1af-5bca-40ab-8f61-73c6c6212c31.png