npm install axios -S

axios.get('后端地址（django）').then(res => {
  console.log(res.data.results)
  if (res.data.code == 0) {
	//請(qǐng)求成功，執(zhí)行這里
  } else {
    alert('失敗')
  }
})

.then(res => {console.log(res.data.results)...
#真正有效的數(shù)據(jù)在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
    //解構(gòu)賦值
    // Object.assign(film_list.results, res.data.results)
    //解構(gòu)賦值
    // let {results,code,msg}=res.data
    // Object.assign(film_list.results, results)
    //解構(gòu)賦值
    // let {data:{results}}=res
    // Object.assign(film_list.results, results)
    //解構(gòu)賦值
    // let {data}=res
    // Object.assign(film_list, data)
 })}

async function load() {
	//將需要執(zhí)行一會(huì)的函數(shù)變成wait
  let res = await axios.get('http://127.0.0.1:8000/films/films/')
  Object.assign(film_list.results, res.data.results)
}
load()

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()

 <script>
 		//【1】函數(shù)編程了promise函數(shù)，開(kāi)始初步執(zhí)行
        let promise =new Promise(function(resolve,reject){
            console.log("promise 開(kāi)始執(zhí)行")
            //執(zhí)行后的三個(gè)結(jié)果(此處可以放代碼，其運(yùn)行結(jié)果也就下面三種)
            throw new Error("error message")
            resolve("promise 執(zhí)行成功")
            reject("promise 執(zhí)行失敗")
        })
        //【2】請(qǐng)求過(guò)去了，開(kāi)始等，并走下一步
        console.log('11111')
		//【3】這邊是門(mén)口等待結(jié)果的
        promise.then(
            function(value){console.log(`promise中執(zhí)行了resolve:${value}`)},
            function(error){console.log(`promise中執(zhí)行了reject:${error}`)}
        )
       //【4】其他代碼
        console.log('222222')
    </script>

 console.log("promise 開(kāi)始執(zhí)行")
 console.log('11111')
 console.log('222222')
 promise執(zhí)行成功或失敗打印的代碼

...
promise.then(
        function(resolveValue){console.log(`promise中執(zhí)行了resolve:${resolveValue}`)}
    ).catch(
        function(error){console.log(error)} 
    )

    	async function fun1(){
            //return 10   // 成功狀態(tài)，走then
            //throw new Error("異常狀態(tài)，走catch")
            //let promise = Promise.resolve("成功狀態(tài)，走then")
            let promise = Promise.reject("失敗狀態(tài)，走catch")
            return promise--（其實(shí)就是return正確和錯(cuò)誤的結(jié)果）
        }
		//將async對(duì)象賦值給promise對(duì)象
        let promise =fun1()
        promise.then(
            function(value){
                console.log("success:"+value)
            }
        ).catch(
            function(value){
                console.log("fail:"+value)
            }
        )

import {useRouter, useRoute} from 'vue-router'
let router=useRouter() --控制路徑跳轉(zhuǎn)
let route=useRoute() --控制當(dāng)前的路徑

router.push('path名')

router.beforeEach((to, from, next) => {
    //to 是目標(biāo)地包裝對(duì)象  .path屬性可以獲取地址
    //from 是來(lái)源地包裝對(duì)象 .path屬性可以獲取地址
    //next是方法，不調(diào)用默認(rèn)攔截！ next() 放行,直接到達(dá)目標(biāo)組件
    //next('/地址')可以轉(zhuǎn)發(fā)到其他地址,到達(dá)目標(biāo)組件前會(huì)再次經(jīng)過(guò)前置路由守衛(wèi)
    console.log(to.path, from.path, next)
    //需要判斷，注意避免無(wú)限重定向
    if (to.name == 'home' || to.name == 'login') {
        next()
    } else {
        let token = localStorage.getItem('token')
        if (token) {
            next()
        } else {
            next('/login')
        }
    }
})

import {defineStore} from 'pinia'
export const definedStore = defineStore(
    {
        id: 'storePinia', //必須唯一
        state: () => { // state中用于定義數(shù)據(jù)
            return {
               ....}},
        getters: {// 用于定義一些通過(guò)數(shù)據(jù)計(jì)算而得到結(jié)果的一些方法 一般在此處不做對(duì)數(shù)據(jù)的修改操作 },
        actions: { // 用于定義一些對(duì)數(shù)據(jù)修改的方法 }
        } })

#### 2 main.js
import {createApp} from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router";
// 導(dǎo)pinia
import {createPinia} from 'pinia'
// 創(chuàng)建pinia對(duì)象
let pinia = createPinia()
createApp(App).use(router).use(pinia).mount('#app')

store
	--definedStore
	--definedGoods
#不同的文件夾，是不同的任務(wù)管理器

#文件中，創(chuàng)造一個(gè)任務(wù)管理器
import {defineStore} from 'pinia'
export const definedStore = defineStore(
    {
        id: 'storePinia', //必須唯一
        state: () => { // state中用于定義數(shù)據(jù)
            return {
               ....}},
        getters: {// 用于定義一些通過(guò)數(shù)據(jù)計(jì)算而得到結(jié)果的一些方法 一般在此處不做對(duì)數(shù)據(jù)的修改操作 },
        actions: { // 用于定義一些對(duì)數(shù)據(jù)修改的方法 }
        } })

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')