vue實現ajax請求(vue-resource和axios)


1、vue-resouce實現ajax請求

  vue1中主要用vue-resouce實現ajax請求,

 2.1 引用vue-resouce

   引入axios,直接在index.html文件中引入;

  

  或者在main.js文件中引入vue-resouce.js,並use  vue-resouce;

  

 2.1 使用vue-resouce

  三種ajax請求的方式

 

 后面可以接{headers: {}} 設置請求頭

 

 

2、axios實現ajax請求

 2.1 引用axios

  vue2.0版本已不推薦使用vue-resouce發送ajax請求,推薦使用axios發送請求;

  一:直接在index中引入vue.js和axios.js文件,

     <script src="js/vue.min.js"></script>

    <script src="js/axios.min.js"></script>

  或者在main.js文件中導入axios,import axios from ‘axios’,將axios設置在vue中的原型中Vue.prototype.axios = axios

 2.2 使用axios

  在組件中需要發送ajax請求的地方(后一種方法引入的axios改為this.axios):

  axios.type(url, params).then(function(res){

    成功回調

  }).catch(function(res){

    失敗回調

  });

  或者: 

  axios({

    method: type,

    url: '',

    data: {}

  }).then(function(res){

    成功回調

  }).catch(function(res){

    失敗回調

  });

  axios不支持跨域請求,如果要進行跨域請求,那么使用vue-resouce獲取jquery發送ajax請求。

  注: axios是一個基於Promise的HTTP請求;關於Promise示例:

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM