Vue3 实战课

[PaulChess]

1. 四月前看完极客时间
2. 把 Vue3 的体系结构梳理出来，尽量找一些大家不知道的干货点
3. PPT 用 公司统一模板

下面的 comments 记录一些知识点，梳理出大纲以后将知识点做一个整合。

[PaulChess]

vite 代理 proxy 解决跨域问题:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server:{
    proxy:{
      // 添加代理
      '/api': 'http://127.0.0.1:9527'
    }
  }
})

请求:

axios({
  url: '/api/test'
})

[PaulChess]

axios 的二次封装:

拦截器

// src/api/index.js
import axios from 'axios'

axios.interceptors.request.use(function(config) {
  // 这里可以往 headers 添加 token
  console.log('请求拦截', config)
  return config
}, function(error) {
  return Promise.reject(error)
})

axios.interceptors.response.use(function(config) {
  // 这里可以对各种响应状态进行处理
  console.log('响应拦截', config)
  return config
}, function(error) {
  return Promise.reject(error)
})

export default axios

实现接口 "防抖"

思路: 根据请求的 url、data、method 为请求生成唯一的 key，在请求拦截器中判断此次请求是否还在进行中，如果在进行中则调用 axios 的 cancelToken 方法取消请求，如果不在进行中则将此次请求加入队列；最后在响应拦截器中根据将此次请求的 key 移除掉。

// src/util/index.js
import md5 from 'md5'

// 计算当前请求的 key 值
export const getRequestKey = (config) => {
  if (!config) {
    return md5(+new Date())
  }
  const data = typeof config.data === 'string'
     ? config.data
     : JSON.stringify(config.data)
  return md5(`${config.url}&${config.method}&${data}`)
}

export const pending = {}

export const checkPending = (key) => !!pending[key]

export const removePending = (key) => delete pending[key]


// src/api/index.js
const CancelToken = axios.CancelToken

axios.interceptors.request.use(function(config) {
  const key = getRequestKey(config)
  if (checkPending(key)) {
    const source = CancelToken.source()
    config.cancelToken = source.token
    source.cancel('重复请求')
  } else {
    pending[key] = true
  }
  return config
}, function(error) {
  return Promise.reject(error)
})

axios.interceptors.response.use(function(response) {
  const key = getRequestKey(response.config)
  removePending(key)
  return config
}, function(error) {
  return Promise.reject(error)
})

[PaulChess]

关于axios请求的扩展知识点:

• 整条请求链路的原理
• 登录、退出登录、认证过程
• 统一配置 loading 加载
• ...其他待补充