vue 基础入门笔记 10:vue-resource、axios
376 / 0 / 创建于 4年前 /
September 的个人博客
vue 基础入门笔记 10
初识http请求
- vue-resource
- 全局设置数据请求接口的根域名 Vue.http.option.root = 'url' 每次请求时不能用绝对路径，不能带 / ,否则不会用根域名做拼接
- axios
- jsonp 原理
- 由于浏览器安全限制，不允许ajax访问协议不同，域名不同，端口不同的数据接口，浏览器认为这种行为不安全
- 可以动态创建script便签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域问题，这种数据获取方式叫做jsonp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 必须放在vue之后，对vue依赖 vue-resource-->
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
<!-- axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app">
<button type="button" @click='httpGet' class="btn btn-default">get</button>
<button type="button" @click='httpPost' class="btn btn-default">post</button>
<button type="button" class="btn btn-default">button</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
// get请求
httpGet() {
// this.$http.get('http://http://www.baidu.com').then( success => {
// console.log(success)
// }, error => {
// console.log(success)
// })
axios.get('http://www.baidu.com')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
// axios.get('url').then(res=>{
// }).catch(error=>{
// })
},
httpPost() {
this.$http.post('http://www.baidu.com').then(success => {
console.log(success)
}, error => {
console.log(success)
})
}
}
});
Vue.config.devtools = true
</script>
</body>
</html>本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：