Vue之axios實現ajax數據請求

Vue通過axios實現數據請求

vue.js默認沒有提供ajax功能的。所以使用vue的時候，一般都會使用axios的插件來實現ajax與后端服務器的數據交互。

# 下載地址：
https://unpkg.com/axios@0.18.0/dist/axios.js
https://unpkg.com/axios@0.18.0/dist/axios.min.js
    
# 使用文檔：
https://www.kancloud.cn/yunye/axios/234845

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

// 發送get請求
// 參數1: 必填，字符串，請求的數據接口的url地址，例如請求地址：http://www.baidu.com?id=200
// 參數2：可選，請求參數和請求頭內容，json對象，要提供給數據接口的參數
axios.get('服務器的資源地址',{ // http://www.baidu.com
    params:{
        參數名:'參數值', // id: 200,
    },
    headers:{
        選項名:'選項值', // 請求頭
    }

}).then(response=>{ // 請求成功以后的回調函數
    console.log("請求成功");
    console.log(response.data); // 獲取服務端提供的數據

}).catch(error=>{   // 請求失敗以后的回調函數
    console.log("請求失敗");
    console.log(error.response);  // 獲取錯誤信息
});



// 發送post請求，參數和使用和axios.get()類似。
// 參數1: 必填，字符串，請求的數據接口的url地址
// 參數2：必填，json對象，要提供給數據接口的參數,如果沒有參數，則必須使用{}
// 參數3：可選，json對象，請求頭信息
axios.post('服務器的資源地址',{
    username: 'xiaoming',
    password: '123456'
},{
    headers:{
        選項名:"選項值",
    }
})
    .then(response=>{ // 請求成功以后的回調函數
    console.log(response);
})
    .catch(error=>{   // 請求失敗以后的回調函數
    console.log(error);
});

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

注意：

axios.delete() 的用法和參數與axios.get()一樣，

axios.put()或者axios.patch的用法和參數與axios.post()一樣。

在http協議中，不同的請求動作都有不同的含義，例如：

get 代表向目標服務器請求獲取數據

post 代表向目標服務器請求上傳數據

put 代表向目標服務器請求更新數據【修改全部數據】

patch 代表向目標服務器請求更新數據【修改部分數據】

patch 代表向目標服務器請求更新數據

delete 代表向目標服務器請求刪除數據

json

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

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

json數據

json數據類似於JavaScript中的對象，鍵是字符串，值是普通變量，還可以是數組或者json數據，但是值不可以是函數方法或者undefined；字符串是雙引號；每個鍵值對用逗號隔開，但最后一個鍵值對不能跟逗號

// json數據的對象格式,json數據格式,是沒有方法的,只有屬性,
// 屬性值：字符串，數值(整數，浮點數，布爾值), json，
{
    "name":"tom",
    "age":18
}

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

補充對比：

// 原生的js的json對象
var obj = {
  age:10,
  sex: '女',	
  work(){                     // work: function(){}的簡寫
    return "好好學習",
  },					    // 最后一個元素后可以加 逗號
}

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

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

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

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

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

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

測試工具

軟件：postman可以用於測試開發的數據接口。

postman就是一個軟件，專門提供給開發者組織和測試http請求的。

下載地址：https://www.postman.com/downloads/

ajax

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

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

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

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

實際而言，axios或者jQuery提供的ajax，本質上就是XMLHttpRequest對象操作的封裝。

數據接口

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

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

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

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

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

jQuery版本

<script src="jquery-3.5.1.js"></script>
<button id="btn">點擊獲取數據</button>
<!-- 寫法1--->
<script>
    $('#btn').click(function () {
        $.ajax({
            url: 'http://wthrcdn.etouch.cn/weather_mini',
            type: 'get',	    // 也可以使用method，提交數據的方式，默認是'GET'
            dataType: 'json',	// 返回的數據格式，常用的有是'json','html',"jsonp"
            data:{			   // 設置發送給服務器的數據，如果是get請求，也可以寫在url地址的?后面
                "city": '北京'	
            },
        })
        .done(function (resp) {		// 請求成功以后的操作
            console.log(resp);
        })
        .fail(function (error) {	// 請求失敗以后的操作
            console.log(error);
        })
    })
</script>

<!-- 寫法2--->
<script>
    $('#btn').click(function () {
        $.ajax({
            url: 'http://wthrcdn.etouch.cn/weather_mini',
            type: 'get',
            dataType: 'json',
            data:{
                "city": '北1京'
            },
            success: function (args) {
                console.log(args)
            }
        })
    })
</script>

Vue版本

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

<div id="app">
    <input type="text" v-model="city">
    <button @click="get_weather">點擊獲取天氣</button>
</div>

<!-- 寫法1--->
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        created(){
            // http://wthrcdn.etouch.cn/weather_mini?city=城市名稱
            axios.get('http://wthrcdn.etouch.cn/weather_mini?city=阜陽')
            .then(response=>{
            	console.log(response);
            })
            .catch(error=>{
                console.log(error);
            })
        }
    });
</script>

<!-- 寫法2--->
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        created(){
            axios.get('http://wthrcdn.etouch.cn/weather_mini',{
                params: { 		//get請求的附帶參數
                    "city": '北京'
                }
            })
                .then(response=>{		// 請求成功，獲取接口數據
                console.log(response);
            })
                .catch(error=>{			// 請求失敗或者then里面代碼出現錯誤時
                console.log(error);
            })
        }
    });
</script>

同源策略

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

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:443/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">
        <input type="text" v-model="music"><button @click="get_music">查詢歌曲</button>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                music:"", // 歌曲標題
            },
            methods:{
                get_music(){
                    axios.get('http://tingapi.ting.baidu.com/v1/restserver/ting',{
                        params:{
                            method: "baidu.ting.search.catalogSug",
                            query: this.music,
                        }
                    }).then(response=>{
                        console.log("查詢數據成功！");
                    }).catch(error=>{
                        console.log("查詢數據失敗！");
                    })
                }
            }
        })
    </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

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

ajax跨域(跨源)方案之CORS

ajax跨域(跨源)方案：服務端授權[CORS]，jsonp，服務端代理

服務端授權[CORS]

CORS是一個W3C標准，全稱是"跨域資源共享"，它允許瀏覽器向跨源的后端服務器發出ajax請求，從而克服了AJAX只能同源使用的限制。實現CORS主要依靠后端服務器中響應數據中設置響應頭信息返回的。

# django的視圖[偽代碼]
def post(request):
	response = new Response()
	response .set_header("Access-Control-Allow-Origin","http://localhost:63342")
	return response;

# 在響應行信息里面設置以下內容：
Access-Control-Allow-Origin: ajax所在的域名地址
# 表示只允許www.oldboy.cn域名的客戶端的ajax跨域訪問
Access-Control-Allow-Origin: www.oldboy.cn  
# * 表示任意源，表示允許任意源下的客戶端的ajax都可以訪問當前服務端信息
Access-Control-Allow-Origin: *

jsonp

當需要的時候再觸發提交數據的請求，獲取數據。需要服務端配合，即服務端提供了響應的方法參數供使用。

<button onclick="getdata()">獲取數據</button>
<script>
    function getdata(){
        // 發送jsonp
        // 1. 創建script標簽，並制定src為api地址，並追加到head標簽中
        let script = document.createElement("script");
        // callback 就是服務端配合我們返回調用的方法名，把服務端數據作為參數給callback的值對應方法進行調用
        script.src="http://cache.video.iqiyi.com/jp/avlist/202861101/1/?callback=setdata";
        document.head.append(script);
        console.log(script);
    }
    function setdata(data){
        // 這里就是響應數據的處理方法。
        console.log(data);//把數據顯示到html頁面
    }
</script>

總結：

# 解決ajax只能同源訪問數據接口的方式：
   1. CORS，跨域資源共享，在服務端的響應行中設置：
      Access-Control-Allow-Origin: 允許訪問的域名地址
   2. jsonp
   	  所謂的jsonp本質上來說不是ajax技術，jsonp的核心實現是依靠script本身加載外部js文件來實現的。
   	  當然，實現jsonp技術，也需要服務端的配合
   3. 是否服務端代理
      思路：通過python來請求對應的服務器接口，客戶端和python這邊處於同源，那么就實現了服務端代理