[LeetCode] 28. 實現 strStr()
阿新 • • 發佈：2022-05-19
什麼是Axios？
Axios是一個開源的可以用在瀏覽器端和NodeJS的非同步通訊框架，主要作用
就是實現AJAX非同步通訊，其功能特點如下：
··從瀏覽器中建立XMLHttpRequests
··從node.js建立http請求
··支援Promise API [ JS中鏈式程式設計 ]
··攔截請求和響應
··轉換請求資料和響應資料
··取消請求
··自動轉換JSON資料
··客戶端支援防禦XSRF（跨站請求偽造）
為什麼要使用Axios？
由於Vue.js是一個檢視層框架並且作者（尤雨溪）嚴格遵守SoC(關注度分離原則)，所以
Vue.js並不包含Ajax通訊功能，為了解決通訊問題。作者單獨開發了一個名為vue-rescouce的
外掛，不過在進入2.0版本後停止了對該外掛的維護並推薦了Axios框架。少用jQuery，因為他
操作Dom太頻繁。
第一個Axios程式
現在開發的介面大部分採用的JSON格式。可以先在專案裡模擬一段JSON資料，資料內容
：建立一個名為data.json的檔案並填入上面的內容，放在專案的根目錄下。
{
"name": "我要學Vue",
"url": "https://www.bilibili.com",
"page": 1,
"isNonProfit": true,
"address": {
"street": "財富門",
"city": "湖南長沙",
"country": "中國"
},
"links": [
{
"name": "hao123",
"links": "https://www.hao123.com"
},
{
"name": "百度",
"links": "https://www.baidu.com"
},
{
"name": "部落格園",
"links": "https://www.cnblogs.com"
}
]
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!--解決閃爍-->
[v-clock]{
display: none;
}
</style>
</head>
<body>
<div id="vue" v-clock>
<div>{{info.name}}</div>
<div>{{info.address.street}}</div>
<a v-bind:href="info.url">點我</a>
</div>
</div>
<!--引入js檔案-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#vue',
data(){
return{
//請求的返回引數合適，必須和json字串一樣
info:{
name: null,
address:{
street:null,
city:null,
country:null
},
url:null
}
}
},
mounted(){//鉤子函式 鏈式程式設計 注意要用ES6以上的瀏覽器
axios.get('../data.json').then(response=>(console.log(this.info=response.data)))
}
});
</script>
</body>
</html>