1.Fetch
很有名的一篇博文,供参考:传统的ajax已死,fetch永生
fetch API 是基于 Promise 设计,旧浏览器不支持 Promise,需要使用 polyfill es6-promise 。
fetch 不需要额外的安装什么东西或引入文件,直接可以使用。
请求方式:get
const app = new Vue({
el: '#app',
data: {
},
mounted() {
//普通函数
fetch('https://www.daxunxun.com/douban').then(function(res) {
console.log(res);//得到的是promise对象
//Response {type: "cors", url: "https://www.daxunxun.com/douban", redirected: false, status: 200, ok: true, …}
return res.json();//将promise对象转换为json数据
}).then(function(data) {
console.log(data);//json数据
});
//箭头函数更为简便
fetch('https://www.daxunxun.com/douban')
.then(res => res.json())
//也可将数据转为text格式
//fetch(url).then(res => res.text()).then(data => {console.log(data)})
.then(data => {
console.log(data);
})
}
});
请求方式:post
const app = new Vue({
el: '#app',
data: {
},
created() {
//headers为:'Content-Type': 'application/x-www-form-urlencoded'
fetch('https://www.daxunxun.com/users/register', {
method: 'post',//设置请求方式
headers: { //应该你要根据你们自己的接口来判断,本案例中适合'application/x-www-form-urlencoded',不是'application/json'
'Content-Type': 'application/x-www-form-urlencoded'
},
body: 'username=12345678912&password=123456',
}).then(res => res.json()).then(data => {
console.log(data);
});
//headers为:'Content-Type': 'application/json'
fetch('https://www.daxunxun.com/users/register', {
method: 'post',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ //由于这里传参的数据格式需要为json,所以需要转换成json格式在上传
username: 12345678912,
password: 123456
})
}).then(res => res.json()).then(data => {
console.log(data);
})
}
});
2.axios
必须得引入 axios.js 文件或安装模块之后才能使用 npm install axios
请求方式:get
const app = new Vue({
el: '#app',
data: {
name: '',
},
mounted() {
axios.get('https://www.daxunxun.com/castsDetail').then(res => {
console.log(res.data);//与fetch不同,数据在res.data中
});
}
});
请求方式:post
const app = new Vue({
el: '#app',
data: {
},
mounted() {
axios.post('https://www.daxunxun.com/users/login',{
username: '12345678932',
password: '123456',
}).then(res => {
console.log(res.data);
});
}
});
网友评论