vue2-通過axios實現數據請求

阿新 • • 發佈：2019-04-25

seda 讀寫 img console city 包含 eve weather ram

1.通過axios實現數據請求

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

所以使用vue的時候，一般都會使用axios的插件來實現ajax與後端服務器的數據交互。

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

下載地址：

https://unpkg.com/[email protected]/dist/axios.js
https://unpkg.com/[email protected]/dist/axios.min.js

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

增 post

刪 delete

改 put

查 get

    // 發送get請求
    // 參數1: 必填，字符串，請求的數據接口的url地址，例如請求地址：http://www.baidu.com?id=200
    // 參數2：可選，json對象，要提供給數據接口的參數
    // 參數3：可選，json對象，請求頭信息
    axios.get(‘服務器的資源地址‘,{ // http://www.baidu.com
        params:{
            參數名:‘參數值‘, // id: 200,
        }
    
    }).then(function (response) { // 
 請求成功以後的回調函數
            console.log("請求成功");
            console.log(response);
    
    }).catch(function (error) {   // 請求失敗以後的回調函數
            console.log("請求失敗");
            console.log(error.response);
    });

    // 發送post請求，參數和使用和axios.get()一樣。
    // 參數1: 必填，字符串，請求的數據接口的url地址
    // 參數2：必填，json對象，要提供給數據接口的參數,如果沒有參數，則必須使用{} 

    // 參數3：可選，json對象，請求頭信息
    axios.post(‘服務器的資源地址‘,{
        username: ‘xiaoming‘,
        password: ‘123456‘
    },{
        responseData:"json",
    })
    .then(function (response) { // 請求成功以後的回調函數
      console.log(response);
    })
    .catch(function (error) {   // 請求失敗以後的回調函數
      console.log(error);
    });

    
    // b‘firstName=Fred&lastName=Flintstone‘

2.json

json是 JavaScript Object Notation 的首字母縮寫，單詞的意思是javascript對象表示法，這裏說的json指的是類似於javascript對象的一種數據格式。

json的作用：在不同的系統平臺，或不同編程語言之間傳遞數據。

3.json數據的語法

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

// json數據的對象格式：
{
    "name":"tom",
    "age":18
}

// json數據的數組格式：
["tom",18,"programmer"]

復雜的json格式數據可以包含對象和數組的寫法。

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

// 數組結構也可以作為json傳輸數據。

json數據可以保存在.json文件中，一般裏面就只有一個json對象。

總結

json文件的後綴是.json
json文件一般保存一個單一的json數據
json數據的屬性不能是方法或者undefined，屬性值只能：數值，字符串，json和數組
json數據只使用雙引號，每一個屬性成員之間使用逗號隔開，並且最後一個成員沒有逗號
   {
      "name":"小明",
      "age":200,
      "fav":["code","eat","swim","read"],
      "son":{
        "name":"小小明",
        "age":100
      }
    }
工具：postman可以用於測試開發的數據接口。

4.1.2 js中提供的json數據轉換方法

javascript提供了一個JSON對象來操作json數據的數據轉換.

方法	參數	返回值	描述
stringify	json對象	字符串	json對象轉成字符串
parse	字符串	json對象	字符串格式的json數據轉成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格式數據的轉換功能
    // stringify(json對象)  # 用於把json轉換成字符串
    let result = JSON.stringify(humen);
    console.log(result);
    console.log(typeof result);
?
    // parse(字符串類型的json數據)  # 用於把字符串轉成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>

View Code

4.2 ajax

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

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

所以開發中ajax是很常用的技術，主要用於操作後端提供的數據接口，從而實現網站的前後端分離。

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

4.2.1 數據接口

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

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

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

4.2.3 ajax的使用

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

jQuery將ajax封裝成了一個函數$.ajax()，我們可以直接用這個函數來執行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

編寫代碼獲取接口提供的數據：

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，提交數據的方式，默認是‘GET‘，常用的還有‘POST‘
                type: ‘get‘, 
                dataType: ‘json‘,  // 返回的數據格式，常用的有是‘json‘,‘html‘,"jsonp"
                data:{ // 設置發送給服務器的數據，如果是get請求，也可以寫在url地址的?後面
                    "city":‘北京‘
                }
            })
            .done(function(resp) {     // 請求成功以後的操作
                console.log(resp);
            })
            .fail(function(error) {    // 請求失敗以後的操作
                console.log(error);
            });
        });
    })
    </script>
</head>
<body>
<button id="btn">點擊獲取數據</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. 發送ajax請求，要通過$.ajax()，參數是對象，裏面有固定的參數名稱。
   $.ajax({
     "url":"數據接口url地址",
     "method":"http請求方式，前端只支持get和post",
     "dataType":"設置服務器返回的數據格式，常用的json，html，jsonp，默認值就是json",
     // 要發送給後端的數據參數，post時，數據必須寫在data，get可以寫在data,也可以跟在地址欄?號後面
     "data":{
       "數據名稱":"數據值",
     }
   }).then(function(resp){ // ajax請求數據成功時會自動調用then方法的匿名函數
     console.log( resp ); // 服務端返回的數據
   }).fail(function(error){ // ajax請求數據失敗時會自動調用fail方法的匿名函數
     console.log( error );
   });
   
2. ajax的使用往往配合事件/鉤子操作進行調用。

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

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

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

4.2.4 同源策略

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

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

前端地址：`http://www.oldboy.cn/index.html`	是否同源	原因
`http://www.oldboy.cn/user/login.html`	是	協議、域名、端口相同
`http://www.oldboy.cn/about.html`	是	協議、域名、端口相同
`https://www.oldboy.cn/user/login.html`	否	協議不同 ( 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>

View Code

上面代碼運行錯誤如下：

錯誤關鍵詞：Access-Control-Allow-Origin

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

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.

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

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

實現CORS主要依靠後端服務器中響應數據中設置響應頭信息返回的。

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: *

總結

0. 同源策略：瀏覽器的一種保護用戶數據的一種安全機制。
   瀏覽器會限制腳本語法不能跨源訪問其他源的數據地址。
   同源：判斷兩個通信的地址之間，是否協議，域名[IP]，端口一致。
   
   ajax：  http://127.0.0.1/index.html
   api數據接口：  http://localhost/index
   
   這兩個是同源麽？不是同源的。是否同源的判斷依據不會根據電腦來判斷，而是通過協議、域名、端口的字符串是否來判斷。
   
1. ajax默認情況下會受到同源策略的影響，一旦受到影響會報錯誤如下：
     No ‘Access-Control-Allow-Origin‘ header is present on the requested resource

2. 解決ajax只能同源訪問數據接口的方式：
   1. 在服務端的響應行中設置：
      Access-Control-Allow-Origin: 允許訪問的域名地址
   2. jsonp
   3. 是否服務端代理
      思路：通過python來請求對應的服務器接口，獲取到數據以後，

5. 組件化開發

5.1 組件[component]

組件（Component）是自定義封裝的功能。在前端開發過程中，經常出現多個網頁的功能是重復的，而且很多不同的網站之間，也存在同樣的功能。

而在網頁中實現一個功能，需要使用html定義功能的內容結構，使用css聲明功能的外觀樣式，還要使用js來定義功能的特效，因此就產生了把一個功能相關的[HTML、css和javascript]代碼封裝在一起組成一個整體的代碼塊封裝模式，我們稱之為“組件”。

所以，組件就是一個html網頁中的功能，一般就是一個標簽，標簽中有自己的html內容結構，css樣式和js特效。

這樣，前端人員就可以在開發時，只需要書寫一次代碼，隨處引入即可使用。

組件有兩種：默認組件[全局組件] 和單文件組件

5.1.1 默認組件

<div id="app">
    <addnum></addnum>
    <addnum></addnum>
    <addnum></addnum>
    <addnum></addnum>
    <addnum></addnum>
</div>

<script>
    Vue.component("addnum",{
        template:‘<div><input type="text" v-model="num"><button @click="num+=1">點擊</button></div>‘,
        data: function(){
            // 寫在這裏的數據只有當前組件可以使用
            return {
                num:1,
            }
        }
    });


    var vm = new Vue({
        el:"#app",
        // 這裏寫的數據是全局公用的，整個文件共享
        data:{

        }
    })
</script>

vue2-通過axios實現數據請求

seda 讀寫 img console city 包含 eve weather ram 1.通過axios實現數據請求 vue.js默認沒有提供ajax功能所以使用vue的時候，一般都會使用axios的插件來實現ajax與後端服務器的數據交互。註意，axios本質

vue2-通過axios實現數據請求

1.通過axios實現數據請求

2.json

3.json數據的語法

4.1.2 js中提供的json數據轉換方法

4.2 ajax

4.2.1 數據接口

4.2.3 ajax的使用

4.2.4 同源策略

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

5. 組件化開發

5.1 組件[component]

5.1.1 默認組件

vue2-通過axios實現數據請求

python_如何通過twisted實現數據庫異步插入？

angular5 通過服務實現數據的傳遞

axios將數據請求格式修改為application/x-www-form-urlencoded

vue---axios實現數據交互與跨域問題

通過spring抽象路由數據源+MyBatis攔截器實現數據庫自動讀寫分離

通過hibernate封裝數據庫持久化過程回顧泛型/繼承/實現等概念

0415關於通過FILEBEAT，LOGSTASH,ES,KIBNA實現數據的采集

【MySQL】通過Binary Log簡單實現數據回滾（一）

關於 MongoDB 與 SQL Server 通過本身自帶工具實現數據快速遷移及註意事項的探究

vue axios數據請求get、post方法的使用

解析Node.js通過axios實現網路請求

利用Promise實現數據多個請求加載完成時執行某個方法

Spring+SpringMVc+Mybatis實現數據庫查詢

saltstack實現數據庫基於GTID的主從復制

C語言實現數據結構串（堆分配存儲表示法）

實現數據庫連接池

c++實現數據結構1.順序表

java 接口自動化測試之數據請求的簡單封裝

在RGui中實現數據源的導入（數據框,.txt,excel,MySQL）

vue2-通過axios實現數據請求

1.通過axios實現數據請求

2.json

3.json數據的語法

4.1.2 js中提供的json數據轉換方法

4.2 ajax

4.2.1 數據接口

4.2.3 ajax的使用

4.2.4 同源策略

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

5. 組件化開發

5.1 組件[component]

5.1.1 默認組件

相關推薦