【5.0】vue请求函数和路由
- 此处是与后端交互发送请求拿到数据,和vue自己中的页面跳转路由
【一】axios使用
【1】安装
-
终端命令
npm install axios -S
【2】基本语法
-
axios.get('后端地址(django)').then(res => { console.log(res.data.results) if (res.data.code == 0) { //请求成功,执行这里 } else { alert('失败') } })
【3】axios请求成功,取数据
-
数据位置
.then(res => {console.log(res.data.results)... #真正有效的数据在res.data.results中
-
赋值方法
- 只要利用了结构数据的对应性
const film_list = reactive({'results': []}) const getfilm=()=>{ axios.get('http://127.0.0.1:8000/films/films/').then(res => { console.log(res.data) // film_list.results=res.data.results //解构赋值 // Object.assign(film_list.results, res.data.results) //解构赋值 // let {results,code,msg}=res.data // Object.assign(film_list.results, results) //解构赋值 // let {data:{results}}=res // Object.assign(film_list.results, results) //解构赋值 // let {data}=res // Object.assign(film_list, data) })}
【二】async和await
【1】介绍
- 两者搭配,定义了一个携程函数,如果函数中有io操作,就写await,之前then中的值,可以直接复制给一个变量
- 其实就是并发的操作,先去发送请求,这边也在等着接收数据,如果成功了就把数据拿过来,不成功就提示错误,而不是一步等一步执行
【2】使用
-
async function load() { //将需要执行一会的函数变成wait let res = await axios.get('http://127.0.0.1:8000/films/films/') Object.assign(film_list.results, res.data.results) } load()
【3】使用二:有正确和错误两个路
-
下面的例子是套娃,func2是根据func1的结果进行走的,同样可以定义func3接收func2的结果
-
async function fun1(){ return 10 } async function fun2(){ try{ let res = await fun1() //let res = await Promise.reject("something wrong") }catch(e){ console.log("catch got:"+e) } console.log("await got:"+res) } fun2()
【三】promise语法
【1】介绍
-
# 前端中的异步编程技术,多线程+线程结果回调! # Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6将其写进了语言标准,统一了用法,原生提供了Promise对象。 # 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。 # Promise对象有以下两个特点。 (1)Promise对象代表一个异步操作,有三种状态:`Pending`(进行中)、`Resolved`(已完成,又称 Fulfilled)和`Rejected`(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是`Promise`这个名字的由来,它的英语意思就是“承诺”,表示其他手段无法改变。 (2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从`Pending`变为`Resolved`和从`Pending`变为`Rejected`。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。 # 生活中案例 你跟你女朋友说,5年后等我赚够500w就结婚--》定义函数 -1 进行中(努力赚钱,其他代码继续执行) -2 成功(赚够500w---》结婚) -3 失败(没赚够---》分手)
-
总结:一个请求要转一小会,请求回来只有成功和不成功两条路,我们可以预判,并给出两条路,成功了resolve走一个代码,失败了reject和err走另一个代码
【2】promise运行的两个结果
-
1.实例化promise对象,并且执行(类似Java创建线程对象,并且start) 参数: resolve,reject随意命名,但是一般这么叫! 参数: resolve,reject分别处理成功和失败的两个函数! 成功resolve(结果) 失败reject(结果) 参数: 在function中调用这里两个方法,那么promise会处于两个不同的状态 状态: promise有三个状态 pending 正在运行 resolved 内部调用了resolve方法 rejected 内部调用了reject方法 参数: 在第二步回调函数中就可以获取对应的结果
2.获取回调函数结果 then在这里会等待promise中的运行结果,但是不会阻塞代码继续运行
【3】promise代码
-
<script> //【1】函数编程了promise函数,开始初步执行 let promise =new Promise(function(resolve,reject){ console.log("promise 开始执行") //执行后的三个结果(此处可以放代码,其运行结果也就下面三种) throw new Error("error message") resolve("promise 执行成功") reject("promise 执行失败") }) //【2】请求过去了,开始等,并走下一步 console.log('11111') //【3】这边是门口等待结果的 promise.then( function(value){console.log(`promise中执行了resolve:${value}`)}, function(error){console.log(`promise中执行了reject:${error}`)} ) //【4】其他代码 console.log('222222') </script>
1 console.log("promise 开始执行") 2 console.log('11111') 3 console.log('222222') 4 promise执行成功或失败打印的代码
【4】catch情况
-
就是将上面then中成功和不成功的结果分开,then只走成功的,catch走不成功的
... promise.then( function(resolveValue){console.log(`promise中执行了resolve:${resolveValue}`)} ).catch( function(error){console.log(error)} )
【三】async和promise搭配
【1】介绍
- async函数的结果会变成promise对象,通过promise可以对两种情况进行接收
- 成功了就走promise的then,不成功走promise的catch
【2】使用
-
先定义async类的函数,在将函数赋给一个promise对象,接收它的执行情况
-
async function fun1(){ //return 10 // 成功状态,走then //throw new Error("异常状态,走catch") //let promise = Promise.resolve("成功状态,走then") let promise = Promise.reject("失败状态,走catch") return promise--(其实就是return正确和错误的结果) } //将async对象赋值给promise对象 let promise =fun1() promise.then( function(value){ console.log("success:"+value) } ).catch( function(value){ console.log("fail:"+value) } )
【四】vue-router插件
-
如果在创建的时候没有选择router,可以安装vue-router插件
安装插件--创建router->index.js-->导入插件-->在main.js中使用
【1】安装
-
# 1 需要使用 vue-router 4版本及以上 npm install -S vue-router@4
【2】路由跳转
-
需要从vue-router导入,拿到这个类,然后实例化出router和route,可以对跳转路径和当前路径操作
import {useRouter, useRoute} from 'vue-router' let router=useRouter() --控制路径跳转 let route=useRoute() --控制当前的路径
-
使用
router.push('path名')
【3】前置路由守卫
-
router.beforeEach((to, from, next) => { //to 是目标地包装对象 .path属性可以获取地址 //from 是来源地包装对象 .path属性可以获取地址 //next是方法,不调用默认拦截! next() 放行,直接到达目标组件 //next('/地址')可以转发到其他地址,到达目标组件前会再次经过前置路由守卫 console.log(to.path, from.path, next) //需要判断,注意避免无限重定向 if (to.name == 'home' || to.name == 'login') { next() } else { let token = localStorage.getItem('token') if (token) { next() } else { next('/login') } } })
【五】pinia任务管理器
【1】介绍
- 和vuex一样,相当于一个大容器和任务分配
- 有专门存放数据的地方,有真正执行函数的地方,和vuex相比少了一个任务分配的过程
【2】管理器语法
-
import {defineStore} from 'pinia' export const definedStore = defineStore( { id: 'storePinia', //必须唯一 state: () => { // state中用于定义数据 return { ....}}, getters: {// 用于定义一些通过数据计算而得到结果的一些方法 一般在此处不做对数据的修改操作 }, actions: { // 用于定义一些对数据修改的方法 } } })
-
definedStore和id名字相关联,就类似一类人(用户/商品这种),数据就可以分类存放在不同的任务管理器中了
【3】创建pinia对象
-
#### 2 main.js import {createApp} from 'vue' import './style.css' import App from './App.vue' import router from "./router"; // 导pinia import {createPinia} from 'pinia' // 创建pinia对象 let pinia = createPinia() createApp(App).use(router).use(pinia).mount('#app')
-
创建store文件夹
store --definedStore --definedGoods #不同的文件夹,是不同的任务管理器
#文件中,创造一个任务管理器 import {defineStore} from 'pinia' export const definedStore = defineStore( { id: 'storePinia', //必须唯一 state: () => { // state中用于定义数据 return { ....}}, getters: {// 用于定义一些通过数据计算而得到结果的一些方法 一般在此处不做对数据的修改操作 }, actions: { // 用于定义一些对数据修改的方法 } } })
【六】elementui-plus
-
安装
npm install element-plus -S
-
配置
import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' createApp(App).use(router).use(pinia).use(ElementPlus).mount('#app')
-
使用
https://element-plus.org/zh-CN/component/popover.html #直接从该地址复制粘贴即可