Vue3-数据交互请求工具设计

axios配置

1.安装axios

pnpm add axios或yarn add axios

2.利用axios.create创建一个自定义的axios来使用

参考官网：axios中文文档|axios中文网 | axios

Axios中文文档 | Axios中文网

在src/utils文件夹下新建request.js，封装axios模块

先写一个axios实例

import axios from 'axios'
// 创建axios实例，将来对创建出来的实例，进行自定义配置
// 好处：不会污染原始的axios实例
const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',//根据需求配置
  timeout: 1000,//可以适当延长
  headers: { 'X-Custom-Header': 'foobar' }//可以去掉
})

再定义拦截器（复制粘贴后把axios改为instance）

// 自定义配置 - 请求/响应拦截器
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么(默认axios会多包装一层data，需要响应拦截器中处理一下)
  return response.data
}, function (error) {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  return Promise.reject(error)
})

 导出

// 导出配置好的实例
export default instance

响应拦截器统一处理错误提示

  const res = response.data
  if (res.status !== 200) {
    // 给提示
    Toast(res.message)
    // 抛出一个错误的promise
    return Promise.reject(res.message)
  }

 

Header参数统一携带Token

注意：如果变量名带有如"-"等特殊字符的，就要写成对象的中括号语法[]

或

import axios from 'axios'
const baseURL = '' //基地址

const instance = axios.create({
  //1.基础地址，超时时间
})

instance.interceptors.request.use(
  (config) => {
    //2.携带token
    return config
  },
  (err) => Promise.reject(err)
)

instance.interceptors.response.use(
  (res) => {
    //3.处理业务失败
    //4.摘取核心响应数据
    return res
  },
  (err) => {
    //5.处理401错误
    return Promise.reject(err)
  }
)
export default instance

根据实际api的需求来填充配置

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

const baseURL = '' //填写基地址

const instance = axios.create({
  //1.基础地址，超时时间
  baseURL,
  timeout: 10000
})

//请求拦截器
instance.interceptors.request.use(
  (config) => {
    //2.携带token
    const useSrore = useUserStore()
    if (useSrore.token) {
      config.headers.Authorization = useSrore.token
    }
    return config
  },
  (err) => Promise.reject(err)
)

//响应拦截器
instance.interceptors.response.use(
  (res) => {
    //3.摘取核心响应数据
    if (res.data.code === 0) {
      return res
    }
    //4.处理业务失败，给错误提示，抛出错误
    ElMessage.error(res.data.message || '服务异常')
    return Promise.reject(res.data)
  },
  (err) => {
    //5.处理401错误
    //错误的特殊情况=>401  权限不足 或 token 到期=>拦截到登录
    if (err.response.status === 401) {
      router.push('/login')
    }
    //错误的默认情况=>只要给提示
    ElMessage.error(err.response.data.message || '服务异常')

    return Promise.reject(err)
  }
)
export default instance //默认导出
export { baseURL } //按需导出

封装api

创建

在src/api文件夹下创建js文件

import request from '@utils/request'

export const userRegisterService = ({ username, password, repassword }) => {
  return request.post('/api/reg', { username, password, repassword })
}

或简写为

import request from '@utils/request'

export const userRegisterService = ({ username, password, repassword }) =>
  request.post('/api/reg', { username, password, repassword })

文件里可以封装多个接口

调用

import { userRegisterService } from '@/api/user.js'

const register = async () => {
  await userRegisterService(formModel.value)
}

 请求成功会自动执行后面的语句，请求失败会提示错误信息。

const login = async () => {
  await form.value.validate()
  const res = await userLoginService(formModel.value)//获取返回信息
  console.log('开始登录', res)
}