怎么在vue中利用axios實現(xiàn)數(shù)據(jù)交互

發(fā)布時間：2021-04-20 16:14:00 來源：億速云閱讀：417 作者：Leah 欄目：web開發(fā)

本篇文章給大家分享的是有關怎么在vue中利用axios實現(xiàn)數(shù)據(jù)交互，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發(fā)者使用vue。

1. 通過axios實現(xiàn)數(shù)據(jù)請求

vue.js默認沒有提供ajax功能的。

所以使用vue的時候，一般都會使用axios的插件來實現(xiàn)ajax與后端服務器的數(shù)據(jù)交互。

注意，axios本質上就是javascript的ajax封裝，所以會被同源策略限制。

下載地址：

https://unpkg.com/axios@0.18.0/dist/axios.js
https://unpkg.com/axios@0.18.0/dist/axios.min.js

axios提供發(fā)送請求的常用方法有兩個：axios.get() 和 axios.post() 。

增 post

刪 delete

改 put

查 get

 // 發(fā)送get請求
 // 參數(shù)1: 必填，字符串，請求的數(shù)據(jù)接口的url地址，例如請求地址：http://www.baidu.com?id=200
 // 參數(shù)2：可選，json對象，要提供給數(shù)據(jù)接口的參數(shù)
 // 參數(shù)3：可選，json對象，請求頭信息
 axios.get('服務器的資源地址',{ // http://www.baidu.com
  params:{
   參數(shù)名:'參數(shù)值', // id: 200,
  }
 }).then(function (response) { // 請求成功以后的回調函數(shù)
   console.log("請求成功");
   console.log(response);
 }).catch(function (error) { // 請求失敗以后的回調函數(shù)
   console.log("請求失敗");
   console.log(error.response);
 });
 // 發(fā)送post請求，參數(shù)和使用和axios.get()一樣。
 // 參數(shù)1: 必填，字符串，請求的數(shù)據(jù)接口的url地址
 // 參數(shù)2：必填，json對象，要提供給數(shù)據(jù)接口的參數(shù),如果沒有參數(shù)，則必須使用{}
 // 參數(shù)3：可選，json對象，請求頭信息
 axios.post('服務器的資源地址',{
  username: 'xiaoming',
  password: '123456'
 },{
  responseData:"json",
 })
 .then(function (response) { // 請求成功以后的回調函數(shù)
  console.log(response);
 })
 .catch(function (error) { // 請求失敗以后的回調函數(shù)
  console.log(error);
 });
 // b'firstName=Fred&lastName=Flintstone'

1.1 json

json是 JavaScript Object Notation 的首字母縮寫，單詞的意思是javascript對象表示法，這里說的json指的是類似于javascript對象的一種數(shù)據(jù)格式。

json的作用：在不同的系統(tǒng)平臺，或不同編程語言之間傳遞數(shù)據(jù)。

1.1.1 json數(shù)據(jù)的語法

json數(shù)據(jù)對象類似于JavaScript中的對象，但是它的鍵對應的值里面是沒有函數(shù)方法的，值可以是普通變量，不支持undefined，值還可以是數(shù)組或者json對象。

// json數(shù)據(jù)的對象格式：
{
 "name":"tom",
 "age":18
}
// json數(shù)據(jù)的數(shù)組格式：
["tom",18,"programmer"]

復雜的json格式數(shù)據(jù)可以包含對象和數(shù)組的寫法。

{
 "name":"小明",
 "age":200,
 "fav":["code","eat","swim","read"],
 "son":{
 "name":"小小明",
 "age":100,
 "lve":["code","eat"],
 }
}

// 數(shù)組結構也可以作為json傳輸數(shù)據(jù)。

json數(shù)據(jù)可以保存在.json文件中，一般里面就只有一個json對象。

總結：

1. json文件的后綴是.json
2. json文件一般保存一個單一的json數(shù)據(jù)
3. json數(shù)據(jù)的屬性不能是方法或者undefined，屬性值只能：數(shù)值、字符串、json和數(shù)組
4. json數(shù)據(jù)只使用雙引號、每一個屬性成員之間使用逗號隔開，并且最后一個成員沒有逗號。

 {
  "name":"小明",
  "age":200,
  "fav":["code","eat","swim","read"],
  "son":{
  "name":"小小明",
  "age":100
  }
 }

工具：postman可以用于測試開發(fā)的數(shù)據(jù)接口。

1.1.2 js中提供的json數(shù)據(jù)轉換方法

javascript提供了一個JSON對象來操作json數(shù)據(jù)的數(shù)據(jù)轉換.

方法	參數(shù)	返回值	描述
stringify	json對象	字符串	json對象轉成字符串
parse	字符串	json對象	字符串格式的json數(shù)據(jù)轉成json對象

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<script>
 // json語法
 let humen = {
  "username":"xiaohui",
  "password":"1234567",
  "age":20
 };
 console.log(humen);
 console.log(typeof humen);
 // JSON對象提供對json格式數(shù)據(jù)的轉換功能
 // stringify(json對象) # 用于把json轉換成字符串
 let result = JSON.stringify(humen);
 console.log(result);
 console.log(typeof result);
 // parse(字符串類型的json數(shù)據(jù)) # 用于把字符串轉成json對象
 let json_str = '{"password":"1123","age":20,"name":"xiaobai"}';
 console.log(json_str)
 console.log(typeof json_str)
 let json_obj = JSON.parse(json_str);
 console.log(json_obj);
 console.log(typeof json_obj)
 console.log(json_obj.age)
</script>
</body>
</html>

1.2 ajax

ajax，一般中文稱之為："阿賈克斯"，是英文 “Async Javascript And Xml”的簡寫，譯作：異步js和xml數(shù)據(jù)傳輸數(shù)據(jù)。

ajax的作用： ajax可以讓js代替瀏覽器向后端程序發(fā)送http請求，與后端通信，在用戶不知道的情況下操作數(shù)據(jù)和信息，從而實現(xiàn)頁面局部刷新數(shù)據(jù)/無刷新更新數(shù)據(jù)。

所以開發(fā)中ajax是很常用的技術，主要用于操作后端提供的數(shù)據(jù)接口，從而實現(xiàn)網站的前后端分離。

ajax技術的原理是實例化js的XMLHttpRequest對象，使用此對象提供的內置方法就可以與后端進行數(shù)據(jù)通信。

1.2.1 數(shù)據(jù)接口

數(shù)據(jù)接口，也叫api接口，表示后端提供操作數(shù)據(jù)/功能的url地址給客戶端使用。

客戶端通過發(fā)起請求向服務端提供的url地址申請操作數(shù)據(jù)【操作一般：增刪查改】

同時在工作中，大部分數(shù)據(jù)接口都不是手寫，而是通過函數(shù)庫/框架來生成。

1.2.3 ajax的使用

ajax的使用必須與服務端程序配合使用，但是目前我們先學習ajax的使用，所以暫時先不涉及到服務端python代碼的編寫。因此，我們可以使用別人寫好的數(shù)據(jù)接口進行調用。

jQuery將ajax封裝成了一個函數(shù)$.ajax()，我們可以直接用這個函數(shù)來執(zhí)行ajax請求。

接口	地址
天氣接口	http://wthrcdn.etouch.cn/weather_mini?city=城市名稱
音樂接口搜索	http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=歌曲標題
音樂信息接口	http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.song.play&songid=音樂ID

編寫代碼獲取接口提供的數(shù)據(jù)：

jQ版本

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="js/jquery-1.12.4.js"></script>
 <script>
 $(function(){
  $("#btn").on("click",function(){
   $.ajax({
    // 后端程序的url地址
    url: 'http://wthrcdn.etouch.cn/weather_mini',
    // 也可以使用method，提交數(shù)據(jù)的方式，默認是'GET'，常用的還有'POST'
    type: 'get', 
    dataType: 'json', // 返回的數(shù)據(jù)格式，常用的有是'json','html',"jsonp"
    data:{ // 設置發(fā)送給服務器的數(shù)據(jù)，如果是get請求，也可以寫在url地址的?后面
     "city":'北京'
    }
   })
   .done(function(resp) {  // 請求成功以后的操作
    console.log(resp);
   })
   .fail(function(error) { // 請求失敗以后的操作
    console.log(error);
   });
  });
 })
 </script>
</head>
<body>
<button id="btn">點擊獲取數(shù)據(jù)</button>
</body>
</html>

vue版本：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="js/vue.js"></script>
 <script src="js/axios.js"></script>
</head>
<body>
 <div id="app">
  <input type="text" v-model="city">
  <button @click="get_weather">點擊獲取天氣</button>
 </div>
 <script>
  let vm = new Vue({
   el:"#app",
   data:{
    city:"",
   },
   methods:{
    get_weather(){
     // http://wthrcdn.etouch.cn/weather_mini?city=城市名稱
     axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
      .then(response=>{
       console.log(response);

      }).catch(error=>{
       console.log(error.response)
     });
    }
   }
  })
 </script>
</body>
</html>

總結：

1. 發(fā)送ajax請求，要通過$.ajax()，參數(shù)是對象，里面有固定的參數(shù)名稱。

 $.ajax({
  "url":"數(shù)據(jù)接口url地址",
  "method":"http請求方式，前端只支持get和post",
  "dataType":"設置服務器返回的數(shù)據(jù)格式，常用的json，html，jsonp，默認值就是json",
  // 要發(fā)送給后端的數(shù)據(jù)參數(shù)，post時，數(shù)據(jù)必須寫在data，get可以寫在data,也可以跟在地址欄?號后面
  "data":{
  "數(shù)據(jù)名稱":"數(shù)據(jù)值",
  }
 }).then(function(resp){ // ajax請求數(shù)據(jù)成功時會自動調用then方法的匿名函數(shù)
  console.log( resp ); // 服務端返回的數(shù)據(jù)
 }).fail(function(error){ // ajax請求數(shù)據(jù)失敗時會自動調用fail方法的匿名函數(shù)
  console.log( error );
 });

2. ajax的使用往往配合事件/鉤子操作進行調用。

jQuery還提供了$.get 和 $post簡寫$.ajax的操作。

// 發(fā)送get請求
// 參數(shù)1：數(shù)據(jù)接口的請求地址
// 參數(shù)2：發(fā)送給接口地址的數(shù)據(jù)參數(shù)
// 參數(shù)3：ajax請求成功以后，調用的匿名函數(shù)，匿名函數(shù)的第一個參數(shù)還是服務端返回的數(shù)據(jù)
// 參數(shù)4：設置服務端返回的數(shù)據(jù)格式，告訴給jQuery
$.get("test.php", { "func": "getNameAndTime" },
 function(data){
  alert(data.name); // John
  console.log(data.time); // 2pm
 }, "json");
// 發(fā)送post請求
// 參數(shù)1：數(shù)據(jù)接口的請求地址
// 參數(shù)2：發(fā)送給接口地址的數(shù)據(jù)參數(shù)
// 參數(shù)3：ajax請求成功以后，調用的匿名函數(shù)，匿名函數(shù)的第一個參數(shù)還是服務端返回的數(shù)據(jù)
// 參數(shù)4：設置服務端返回的數(shù)據(jù)格式，告訴給jQuery
$.post("test.php", { "func": "getNameAndTime" },
 function(data){
  alert(data.name); // John
  console.log(data.time); // 2pm
 }, "json");

1.2.4 同源策略

同源策略，是瀏覽器為了保護用戶信息安全的一種安全機制。所謂的同源就是指代通信的兩個地址（例如服務端接口地址與瀏覽器客戶端頁面地址）之間比較，是否協(xié)議、域名(IP)和端口相同。不同源的客戶端腳本[javascript]在沒有明確授權的情況下，沒有權限讀寫對方信息。

ajax本質上還是javascript，是運行在瀏覽器中的腳本語言，所以會被受到瀏覽器的同源策略所限制。

前端地址：http://www.oldboy.cn/index.html	是否同源	原因
http://www.oldboy.cn/user/login.html	是	協(xié)議、域名、端口相同
http://www.oldboy.cn/about.html	是	協(xié)議、域名、端口相同
https://www.oldboy.cn/user/login.html	否	協(xié)議不同 ( https和http )
http:/www.oldboy.cn:5000/user/login.html	否	端口不同( 5000和80)
http://bbs.oldboy.cn/user/login.html	否	域名不同 ( bbs和www )

同源策略針對ajax的攔截，代碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="js/vue.js"></script>
 <script src="js/axios.js"></script>
</head>
<body>
 <div id="app">
  <button @click="get_music">點擊獲取天氣</button>
 </div>
 <script>
  let vm = new Vue({
   el:"#app",
   data:{},
   methods:{
    get_music(){
     axios.get("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=我的中國心")
      .then(response=>{
       console.log(response);
      }).catch(error=>{
       console.log(error.response)
     });
    }
   }
  })
 </script>
</body>
</html>

上面代碼運行錯誤如下：

Access to XMLHttpRequest at 'http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=%E6%88%91%E7%9A%84%E4%B8%AD%E5%9B%BD%E5%BF%83' from origin 'http://localhost:63342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

上面錯誤，關鍵詞：Access-Control-Allow-Origin

只要出現(xiàn)這個關鍵詞，就是訪問受限。出現(xiàn)同源策略的攔截問題。

1.2.5 ajax跨域(跨源)方案之CORS

CORS是一個W3C標準，全稱是"跨域資源共享"，它允許瀏覽器向跨源的后端服務器發(fā)出ajax請求，從而克服了AJAX只能同源使用的限制。

實現(xiàn)CORS主要依靠后端服務器中響應數(shù)據(jù)中設置響應頭信息返回的。

django的視圖

def post(request):
 response = new Response()
 response .set_header("Access-Control-Allow-Origin","*")
 return response;
// 在響應行信息里面設置以下內容：
Access-Control-Allow-Origin: ajax所在的域名地址
Access-Control-Allow-Origin: www.oldboy.cn # 表示只允許www.oldboy.cn域名的客戶端的ajax跨域訪問
// * 表示任意源，表示允許任意源下的客戶端的ajax都可以訪問當前服務端信息
Access-Control-Allow-Origin: *

怎么在vue中利用axios實現(xiàn)數(shù)據(jù)交互

總結：

0. 同源策略：瀏覽器的一種保護用戶數(shù)據(jù)的一種安全機制。
瀏覽器會限制腳本語法不能跨源訪問其他源的數(shù)據(jù)地址。
同源：判斷兩個通信的地址之間，是否協(xié)議，域名[IP]，端口一致。

ajax： http://127.0.0.1/index.html
api數(shù)據(jù)接口： http://localhost/index

這兩個是同源么？不是同源的。是否同源的判斷依據(jù)不會根據(jù)電腦來判斷，而是通過協(xié)議、域名、端口的字符串是否來判斷。

1. ajax默認情況下會受到同源策略的影響，一旦受到影響會報錯誤如下：
No 'Access-Control-Allow-Origin' header is present on the requested resource

2. 解決ajax只能同源訪問數(shù)據(jù)接口的方式：

1. 在服務端的響應行中設置：

Access-Control-Allow-Origin: 允許訪問的域名地址

2. jsonp

3. 是否服務端代理

思路：通過python來請求對應的服務器接口，獲取到數(shù)據(jù)以后，

以上就是怎么在vue中利用axios實現(xiàn)數(shù)據(jù)交互，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

怎么在vue中利用axios實現(xiàn)數(shù)據(jù)交互

為什么要使用Vue

猜你喜歡

最新資訊

相關推薦

相關標簽