vue 框架级数据请求 axios(第三方库) fetch(原生) 侦听属性watch 混入mixins

最新推荐文章于 2023-03-03 15:03:36 发布

ShirleyXuMM

最新推荐文章于 2023-03-03 15:03:36 发布

阅读量694

点赞数

本文链接：https://blog.csdn.net/ShirleyXuMM/article/details/93340550

版权

框架级的数据请求

axios ( 第三方库 — 别人封装好的库 ) （重点）

注意：在使用axios之前要引用axios.js文件

<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>

案例：

1.对json数据进行请求

<div id="app">
<button @click = "getData"> get - mock - json </button>
</div>

new Vue({
el: '#app',
methods: {
getData () {
//进行get请求
// axios.get() -- $.get()
// axios.post() ---$.post()
// axios(options) -- $.ajax(options)

// var p = axios({
// url: './data/data.json'
// })

// console.log( p ) Promise对象

axios({
url: './data/data.json',
method: 'get',//默认就是get请求
})
.then( res => console.log( res ))
.catch( error => conosle.log( error ))
}
}

2.对对本地php文件进行请求数据（跨域要在php文件中设置请求头）

<div id="app">
<button @click = "get_myself_php_data"> get - myself - php -api </button>
</div>

new Vue({
el: '#app',
methods: {
get_myself_php_data () {
axios({
url: 'http://localhost/get.php',
params: {
a: 1,
b: 2
}
})
.then( res => console.log( res ))
.catch( error => console.log( error ))
}
}

<?php
header('Access-Control-Allow-Origin:*');
$a=$_GET['a'];
$b=$_GET['b'];
echo $a + $b ;
?>

3.跨域请求线上数据（卖座网 https://m.maizuo.com/v5/#/films/nowPlaying）

<div id="app">
<button @click = "get_be_data"> get - backend online- api </button>
</div>

new Vue({
el: '#app',
methods: {
get_be_data () {
// 跨域请求线上数据 - 卖座
axios({
url: 'https://m.maizuo.com/gateway',
headers: {
'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"154549400038873748996477"}',
'X-Host': 'mall.film-ticket.film.list'
},// 要设置请求头
params: {
cityId: 330100,
pageNum: 1,
pageSize: 10,
type: 1,
k: 7675918
}// params为请求的数据
})
.then( res => console.log( res ))
.catch( error => console.log( error ))
}
}

4.post请求数据

<body>
<div id="app">
<button @click = "postData"> post </button>
</div>

new Vue({
el: '#app',
methods: {
postData () {
/*
post请求官网案例有些问题
axios({
url: 'http://localhost/post.php',
method: 'post',
data: {
a: 2,
b: 2
}
})
.then( res => console.log( res ))
.catch( error => console.log( error ))// 以上是请求不到数据的
*/
var params = new URLSearchParams() //得到params对象，用来接收参数
// params.append( key, value ) key就是参数名，value就是参数值
params.append( 'a', 2 )
params.append( 'b', 2 )
axios({
url: 'http://localhost/post.php',
method: 'post',
headers: {
'Content-Type': "application/x-www-form-urlencoded" //请求头设置为表单提交的请求头
},
data: params
})
.then( res => console.log( res ))
.catch( error => console.log( error ))
}
}
})

fetch ( javascript 原生提供 )（重点）

fetch是原生javascript提供的，所以它可以当做全局变量使用，它是挂载在window对象身上的

fetch要手动进行一次数据格式化，但是axios是内部进行了数据的格式化
fetch get 方法请求数据，参数要直接连接在url上
fetch 格式化数据有三种处理方法
. json() 格式化 json 类型数据，将 json类型 string 转换成 json 对象
text() 格式化文本
. blob() 格式化二进制数据

最低0.47元/天解锁文章

ShirleyXuMM

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 框架级数据请求 axios(第三方库) fetch(原生) 侦听属性watch 混入mixins

框架级的数据请求axios ( 第三方库 — 别人封装好的库 ) （重点）注意：在使用axios之前要引用axios.js文件<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>案例：1.对json数据进行请求<div id="app"&g...
复制链接

扫一扫