【5.0】vue请求函数和路由

最新推荐文章于 2024-08-20 11:29:48 发布

qhahaha~

最新推荐文章于 2024-08-20 11:29:48 发布

阅读量561

点赞数 23

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2401_83569627/article/details/141322174

版权

【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
#直接从该地址复制粘贴即可

qhahaha~

关注

23
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
【5.0】vue请求函数和路由

两者搭配，定义了一个携程函数，如果函数中有io操作，就写await，之前then中的值，可以直接复制给一个变量其实就是并发的操作，先去发送请求，这边也在等着接收数据，如果成功了就把数据拿过来，不成功就提示错误，而不是一步等一步执行# 前端中的异步编程技术，多线程+线程结果回调！# Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。
复制链接

扫一扫