Javascript

【学习打卡】第11天 Vue3 + TS仿知乎专栏企业级项目

本文主要是介绍【学习打卡】第11天 Vue3 + TS仿知乎专栏企业级项目,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

课程名称:Vue3 + TS仿知乎专栏企业级项目
课程章节:第7章
主讲老师:张轩

课程内容

今天的课程是vuex结合axios请求后端真实接口的深入使用。
介绍了RESTful API的概念,使用Swagger API的方法,然后结合自己测icode来使用后端的数据,可以看出老师在课程背后准备了很多东西,并且慕课网平台也在持续优化迭代他们的教学服务。
使用axios和vuex的交互复杂起来了,主要是axios数据拦截,请求过程中有loading的效果,返回数据之后使用commit把数据更新,通过computed的方式页面显示返回的数据。

 import App from './App.vue'
 axios.defaults.baseURL = 'http://localhost:7001/api/'
axios.interceptors.request.use(config => {
  store.commit('setLoading', true)
  return config
})

axios.interceptors.response.use(config => {
  store.commit('setLoading', false)
  return config
})
 const app = createApp(App)
 app.use(router)
 app.use(store)

API的请求如果是权限相关的数据,需要使用token在请求中携带上去,在本地需要维护一份数据,token存在的时候主动去请求数据使用的onMounted.

课程收获

温习了swagger, axios 结合vuex的使用,请求拦截然后数据更新,算是比较简单的内容。
图片描述

这篇关于【学习打卡】第11天 Vue3 + TS仿知乎专栏企业级项目的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!