跨域 axios vuex 防抖节流前端设置代理解决跨域问题对 axios 进行封装统一管理接口使用 npro

前端设置代理解决跨域问题

  server: {
    proxy: {
      '/api': 'http://39.98.123.211'
    }
  },

对 axios 进行封装

//  对axios二次封装

import axios from 'axios'
// const axios = require('axios')

// 利用axios的create方法，传入配置对象创建一个axios实例
const requests = axios.create({
    baseURL: '/api',
    timeout: 5000
})

// 配置请求拦截器
requests.interceptors.request.use((config)=>{
    // config对象中包含headers
    return config
})

// 配置响应拦截器,传入成功与失败的回调
requests.interceptors.response.use((res)=>{
    // 服务器成功返回数据可以被响应拦截器收到
    return res.data
}, (err)=>{
    return Promise.reject(new Error('faile'))
})

export default requests

统一管理接口

// 统一管理api接口

import requests from './request'


// 三级联动接口
export const reqCategoryList = () => {
    // requests本质是axios对象, 返回结果是Promise对象
    return requests({
        url: '/product/getBaseCategoryList',
        method: 'get'
    })
}

使用 nprogress 插件实现发送请求时显示进度条

在封装 axios 的文件中引入 nprogress

在请求拦截器和响应拦截器中调用start() 和 done()

vuex

vuex 是vue项目的状态管理库

管理组件公用的数据

根目录新建 store 文件夹

创建 index.js 文件引入 Vue Vuex Vue.use(Vuex)

// 创建并暴露Store实例在入口文件引入

vuex可以进行模块式开发

在每个模块中配置 state mutations actions getters 对象并对外暴露放到store入口文件统一管理

vue3 + vite 项目使用vuex

import { createStore } from 'vuex' // 创建并暴露Store实例 export default createStore({ // 仓库的数据 state: {}, // 修改数据的唯一方式 mutations: {}, // 业务逻辑，处理异步 actions: {}, // 简化仓库数组，类似计算属性 getters: {} })

在组件中使用

import { mapState } from 'vuex'

computed: {
// 注意 ''
    ...mapState(['count'])
},

模块化

获取模块仓库中的数据 computed: { ...mapState({ count: state => state.home.count }) },

事件委派

把触发事件放到父元素身上利用自定义属性向回调函数传递参数

用 event 对象获取触发事件的节点 event.target

用节点的dataset属性获取自定义属性和属性值

JS 控制显示与隐藏

函数防抖函数节流

实现方式闭包+延迟器

函数防抖

前面所有被触发的事件取消，规定时间之后才会执行最后一次触发的事件

函数节流

事件触发一次后，在规定时间间隔内不会再次触发

lodash.js 插件

在挂载后通过路由决定组件内容展示与否修改响应式数据

过渡动画

节点要有 v-show 或 v-if 节点要被 transition 标签包裹可以给 transition 标签添加 name 属性，在设置样式时直接用 [name]-enter-from [name]-enter-to [name]-enter-active

跨域 axios vuex 防抖 节流