安装 axios 网络请求

[VUE3] 搭建项目准备工作](https://blog.csdn.net/qq_58870434/article/details/149710115?spm=1001.2014.3001.5502)
中文文档

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.data
    }
    // 业务请求失败,弹框提示
     const errorMsg = error.response?.data?.message || '服务器异常'
    ElMessage({ message: errorMsg, type: 'error' })
    return Promise.reject(response.data)
  },
  error => {
  if (error.response?.status === 401) {
     // 登录过期重新登录
      router.push('/login')
    }
    const errorMsg = error.response?.data?.message || '服务器异常'
    ElMessage({ message: errorMsg, type: 'error' })
    return Promise.reject(error)
  }
)

// 导出实例
export default apiSever

3. 封装具体的接口文档

// 新建  api / user.js

import request from '@/utils/request'

export const userRegisterApi = params => request.post('/api/reg', params)

4. 接口调用

注意: res 只需处理请求成功的数据, 因为请求失败数据是不会被触发res的.

const res = await userRegisterApi(formModel.value)
console.log('===打印数据==', res)

如何获取请求失败的数据:

• 使用 try...catch

try {
    const res = await userRegisterApi(formModel.value)
    console.log('===业务成功的数据==', res)
  } catch (error) {
    console.log('===失败的数据==', error)
  }

• 使用 .then....catch

userRegisterApi(formModel.value)
    .then(res => console.log('===业务成功的数据==', res))
    .catch(error => console.log('===失败的数据==', error))

调用示例:

// get 请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// post 请求
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 执行多个并发请求
function getUserAccount() {
  return axios.get('/user/12345');
}
function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));