vue 中 ajax請求封裝以及組件調用方法 ( async/await）

async/await

　　1）async/await場景

    　　這是一個用同步的思維來解決異步問題的方案，當前端接口調用需要等到接口返回值以后渲染頁面時。

　　2）名詞解釋

  　　>async

   　　 async的用法，它作為一個關鍵字放到函數前面，用於表示函數是一個異步函數，因為async就是異步的意思， 異步函數也就意味着該函數的執行不會阻塞后面代碼的執行，             async 函數返回的是一個promise 對象。

 　　>await

   　　await的含義為等待。意思就是代碼需要等待await后面的函數運行完並且有了返回結果之后，才繼續執行下面的代碼。這正是同步的效果

例子如下：await要放在async中，並且await后面的函數運行后必須返回一個Promise對象才能實現同步的效果。

1.api/ajax.js

import axios from 'axios'

export default function ajax(url = '',params = {} ,type = 'GET'){
  let promise;
  return new Promise((resolve ,reject)=>{
  //  判斷請求的方式
    if(type == 'GET'){
      let paramsStr = '';
      Object.keys(params).forEach( key=>{
        paramsStr += key+'='+params[key]+'&';
      })
      if(paramsStr != ''){
        paramsStr = paramsStr.substr(0,paramsStr.lastIndexOf('&'));
      }
      url+='?'+paramsStr;
      promise = axios.get(url);
    }else{
      promise = axios.post(url,params)
    }
    promise.then((res)=>{
      resolve(res.data)
    }).catch((err)=>{
      reject(err);
    })
  })
}

2.api/index.js

import ajax from './ajax'

const BASE_URL = 'https://localhost:3000/';

//請求方法
export const getHomeCasual = ()=>ajax(BASE_URL+'Homeapp.do');

3.組件中調用請求方法

   import { getHomeCasual } from './../api/index'

   created(){
      this.getHomeData();
    },
    methods:{
      // 請求數據  async/await=>異步轉為同步
      async getHomeData (){
          const result = await getHomeCasual();
          console.log(result);
      }
    }

axios 常規用法

new Vue({
   el:"#app",
   created(){
      this.ajaxData(); 
   },
   mothods:{
      ajaxData(){
         const result = axios.get('/homeapp.do').then((res)=>{
                                  console.log(res);
                              })
                              .catch((err)=>{
                                  console.log(res);
                              })
      }
   }      
})    

axios 同步用法

new Vue({
   el:"#app",
   created(){
      this.ajaxData(); 
   },
   mothods:{
      async ajaxData(){
         const result = await axios.get('/homeapp.do');
         console.log(result);
      }
   }      
})