vue promise

vue組件
<template>
<div>
  <p>resolve操作</p>
  <p>沒有then不輸出滿足條件的resolve</p>
  <button v-on:click="promiseIns">promise</button>
  <p>then獲取滿足條件的resolve（）的data，並輸出</p>
  <button v-on:click="promiseInsThen">promiseInsThen</button>
  <p>鏈式操作：promise對象的then之后再添加then，形成鏈式操作</p>
  <button v-on:click="chain">Chain</button>
  <p>reject操作</p>
  <p>沒有then不輸出滿足條件的resolve</p>
  <button v-on:click="promiseIns">promise</button>
  <p>then獲取滿足條件的resolve（）的data，並輸出</p>
  <button v-on:click="promiseInsThen">promiseInsThen</button>
  <p>鏈式操作：promise對象的then之后再添加then，形成鏈式操作</p>
  <button v-on:click="chain">Chain</button>
  <p>resolve和reject的then,then中可以接收兩個回調函數，一個是成功(resolve),一個是失敗(reject)</p>
  <button v-on:click="then2">reject</button>
  <p>catch可以替代then回調函數的失敗時的回調函數</p>
  <button v-on:click="catch2">catch</button>
  <p>all中所有請求都成功調用then,並將所有請求的結果傳到then的參數里</p>
  <button v-on:click="all">all</button>
   <p>race中所有請求有一個最先成功，則調用then</p>
  <button v-on:click="race">race</button>
</div>
</template>

<script>
import {ff,promiseIns} from "@/assets/js/axios.js"
export default{
  data(){
    return{
      qq:"",
      ll:""
    }
  },
methods:{
  promiseIns()//vue文件中事件不能直接調用外部的js里函數，而是要放在vue的函數里引用
  {
    promiseIns()
  },
  promiseInsThen(){
    promiseIns().then(function(data){
      console.log(data)
    })
    },
   runAsync3(){
    var p = new Promise(function(resolve, reject){
        //做一些異步操作
        console.log("1323")
    })
    return p;
},
  chain(){
  promiseIns()
    .then(function(data)
    {
     console.log("then_0")
     console.log(data)
     //return "then_1_data返回數據而不是對象"
     //this.promiseIns()
     return promiseIns()
     //回調函數里只能調用外部引用的promise函數？？？,當前的vue的method的
     //定義的方法引用顯示的是未定義，而且外部的js函數引用，不能加this
    })
    .then(function(data1)
    {
     console.log("then_1")
      console.log(data1)
    })
  },
  then2()
{
  promiseIns()
  .then(
    function(data)
    {console.log("成功時傳回resolve參數.並修改promise的狀態：數據為=》"+data)},
    function(reason,data)//rejcet只傳回reason,如果不傳入data會報異常，兩個參數是必要的
    {console.log("失敗時傳回reject參數.並修改promise的狀態：數據為=》"+data+"原因為=》"+reason)}
  )
},
catch2()
{
  promiseIns()
  .then(
   function(data)
   {console.log("then_catch結構中，成功時傳回resolve參數.並修改promise的狀態：then數據為=》"+data)})
  .catch(function(reason)//傳入reject的數據
   {console.log("then_catch結構中，失敗時傳回reject.並修改promise的狀態：catch數據為=》"+reason)})
},
all(){
Promise.all(this.runAsync3(),this.runAsync3())//this.promiseIns())
.then(function(data){console.log("all:data1=>"+data)})
}//可以使用catch函數嗎
,
race(){
Promise.race(this.runAsync3(),this.promiseIns())
.then(function(data){console.log(data)})
.catch(function(reason){console.log("catch:"+reason)})
}

}
//以上是method函數
}
</script>

//js文件

 
          
            //沒法用，只能在vue里使用axios，而且不能直接在vue文件里引用函數，會出現沒有定義的異常 
           
          
            //get請求 
           
          
            export function loginget(){ 
           
          
            debugger 
           
          
            this.$axios.get("http://local") 
           
          
            .then(function(res){ 
           
          
            debugger 
           
          
            console.log(res) 
           
          
            }) 
           
          
            .catch(function(error){ 
           
          
            debugger 
           
          
            console.log(error) 
           
          
            }) 
           
          
            } 
           
          
            export function promiseIns(){ 
           
          
            var a=new Promise(function(resolve,reject){ 
           
          
            var bb= Math.ceil(Math.random()*10); //生成1-10的隨機數 
           
          
            if(bb>4) 
           
          
            { 
           
          
            console.log("bb>4") 
           
          
            resolve("resolve:bb>4") 
           
          
            } 
           
          
            else 
           
          
            { 
           
          
            console.log("bb<=4") 
           
          
            reject("reject:bb<=4") 
           
          
            } 
           
          
            }) 
           
          
            return a 
           
          
            } 
           
          
            //post請求 
           
          
            export function loginpost(path,para){ 
           
          
            axios.post(path,para) 
           
          
            .then(function(res){ 
           
          
            console.log(res) 
           
          
            }) 
           
          
            .catch(function(error){ 
           
          
            console.log(error) 
           
          
            }) 
           
          
            } 
           
          
            //axios API 
           
          
            //axios({ 
           
          
            // method:'post', 
           
          
            // url:'/user/12345', 
           
          
            // data:{ 
           
          
            // firstname:"Fred", 
           
          
            // lastname:"F" 
           
          
            // } 
           
          
            //})