前端系列十五：Vue3组合API跟封装axios
组合API-依赖注入：
使用provide函数和inject函数完成后代组件通讯
使用场景:
有一个父组件,里头有子组件,有孙组件,有很多后代组件,共享父组件数据
需要引入 provide
父组件写法：
import { provide } from 'vue'
setup( ) {
const money = 100
//将数据提供给后代组件 provide
provide( 'money' , money )
return { money }
}
}
子组件写法：
import { inject } from 'vue'
setup( ) {
const money = inject( 'money' )
return { money }
}
因为要遵循数据单向流原则
子组件想改变父组件的值必须通过父组件定义的方法来修改
在父组件定义方法
父组件写法：
setup( ) {
cosnt money = ref( 100 )
cosnt changgeMoney = ( saleMoney ) => {
console.log( 'changeMoney', saleMoney )
money.value = money.value - saleMoney
}
provide( 'changeMoney', changeMoney )
子组件写法：
setup( ) {
const money = inject( 'money' )
const = changeMoney = inject( 'changeMoney' )
const fn = ( ) => {
changeMoney( 20 )
}
return { money, fn }
}
Vue3封装axios请求：
// 1.创建一个新的axios实例
// 2.请求拦截器,如果有token进行头部携带
// 3.响应拦截器: 1.剥离无效数据 2.处理token失效
// 4.导出一个函数,调用当前的axios实例 发送请求，返回值promise
第一步：
安装axios npm i axios
第二步：
导入axios
写法：
import axios from 'axios'
第三步：
创建axios实例
const instance = axios.create({
// axios的一些配置, baseURL timeout
baseURL,
timeout:5000
})
第四步:
// 导出baseURL 导出基准地址 ,原因其他地方不是通过axios发请求的地方用上基准地址
export const baseURL = ''
第五步：
请求拦截器
// 引入vuex
import store from '@/store'
// 请求拦截器
instance.interceptors.request.use(config =>{
// 拦截业务逻辑
// 进行请求配置的修改
// 如果本地有token就在头部携带
// 1.获取用户信息对象
const {profile} = store.state.user
// 2.判断是否有token
if(profile.token) {
// 3.设置token
config.headers.Authorization = `Bearer ${profile.token}`
}
return config
}, err => {
return Promise.reject(err)
})
第六步:
响应拦截器
// 导入路由
import router from '@/router'
//响应拦截器: 1.剥离无效数据 2.处理token失效
// res => res.data 取出data数据, 将来调用接口的时候直接拿到的就是后台的数据
instance.interceptors.response.use(res => res.data, err => {
// 401 状态码 ,进入该函数
if(err.response && err.response.status === 401) {
// 1.清空无效用户信息
// 2.跳转到登录页码
// 3.跳转需要传参 (当前路由地址) 给登录页码
store.commit('user/setUser',{})
// 当前路由地址
// 组件里头: `/user?a=10` $router.path === /user $router.fullPath === /user?a=10
// js模块中: router.currentRoute.value.fullPath 就是当前路由地址 是ref响应式数据
// 获取当前路由地址并转码
const fullPath = encodeURIComponent(router.currentRoute.value.fullPath)
// encodeURIComponent 转换url编码,防止解析地址出问题
router.push('/login?redirectUrl'+fullPath)
}
return Promise.reject(err)
})
第七步：
// 请求工具函数
export default (url, methods, submitData) => {
// 负责发请求: 请求地址, 请求方式 , 提交的数据
return instance ({
url,
method,
// 1.如果是get请求 需要使用params来传递submitData
// 2.如果不是get请求 需要使用data来传递submitData
// 3. [ ] 设置一个动态的key， 写js表达式, js表达式的执行结果当作KEY
// method参数: get,Get,GET 转换成消息再来判断
[method.toLowerCase() === 'get' ? 'params' : 'data']: submitData
})
}
第八步：
测试请求
setup () {
const fn = () => {
// 测试请求
request('/member/profile', 'post', { a: 10 })
}
return { fn }
}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！