我是靠谱客的博主 野性音响,最近开发中收集的这篇文章主要介绍前后端交互(Promise、fetch、axios、async/awit用法)1.Promise概述2.fetch的基本用法3.axios的基本用法4. async/await的基本用法,觉得挺不错的,现在分享给大家,希望可以做个参考。
概述
1.Promise概述
Promise是异步编程的一种解决方案,从语法上讲,Promise是一个对象,从它可以获取异步操作的消息。
1.2Promise的好处:
1.2.1. 可以避免多层异步调用嵌套的问题(回调地狱)
1.2.2. Promise对象提供了简洁的API,使得控制异步操作更加容易。
1.3Promise的基本使用
var p = new Promise(function(resolve, reject) {
// 在这里处理异步任务
// 成功时调用resolve
// 失败时调用reject
});
p.then(
function(ret) {
// 从resolve得到正常的结果
},
function(ret) {
// 从reject得到错误的信息
}
);
1.4 基于Promise处理Ajax请求
function QueryData() {
var p = new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState !== 4) return;
if (xhr.readyState == 4 && shr.status == 200) {
// 处理正常的情况
resolve(xhr.response);
} else {
// 处理异常情况
reject("服务器错误");
}
};
xhr.open("get", url);
xhr.send(null);
});
return p;
}
QueryData("http://localhost:3000/data").then(
function(data) {
console.log(data);
},
function(info) {
console.log(info);
}
);
1.5 使用以下代码可以发送多次Ajax请求
QueryData(url)
.then(function(data) {
return QueryData(url);
})
.then(function(data) {
return QueryData(url);
})
.then(function(data) {
return QueryData(url);
});
1.6 then参数中的函数返回值
1.返回Promise实例对象(返回的该实例对象会调用下一个then)
2.返回普通值(返回的普通会直接传递给下一个then,通过then参数中函数的参数接收该值)
1.7 Promise常用的API
1.7.1.实例方法
p.then() 得到异步任务的正确结果
p.catch() 获取异常信息
p.finally() 成功与否都会执行
1.7.2.对象方法
Promise.all() 并发处理多个异步任务,所有任务都执行完成才能得到结果
Promise.race() 并发处理多个异步任务,只要有一个任务完成就能得到结果
2.fetch的基本用法
fetch("http://loaclhost:3000/data")
.then(function(data) {
// text()方法,属于fetchAPI的一部分,它返回Promise实例对象,用于获取后台返回的数据
return data.text();
})
.then(function(data) {
console.log(data);
});
2.1 GET请求方式的参数传递
fetch("http://loaclhost:3000/data?id=123")
.then(function(data) {
// text()方法,属于fetchAPI的一部分,它返回Promise实例对象,用于获取后台返回的数据
return data.text();
})
.then(function(data) {
console.log(data);
});
2.2 POST请求方式的参数传递
fetch("http://loaclhost:3000/data", {
methods: "post",
body: "username=lisi&password=123",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
}
})
.then(function(data) {
// text()方法,属于fetchAPI的一部分,它返回Promise实例对象,用于获取后台返回的数据
return data.text();
})
.then(function(data) {
console.log(data);
});
3.axios的基本用法
axios.get("http://loaclhost:3000/data").then(ret => {
// data属性名称是固定的,用于获取后台响应的数据
console.log(ret.data);
});
3.1GET请求方式的参数传递
1.直接通过url地址传参即可。
2. 通过params选项传递参数。
axios
.get("http://loaclhost:3000/data", {
params: {
id: 123
}
})
.then(ret => {
// data属性名称是固定的,用于获取后台响应的数据
console.log(ret.data);
});
3.2POST请求方式的参数传递(默认传递的是json格式的数据)
axios
.post("http://loaclhost:3000/datapost", {
id: 123,
username:'ww'
})
.then(ret => {
// data属性名称是固定的,用于获取后台响应的数据
console.log(ret.data);
});
3.3 axios的响应结果
响应结果的主要属性:
1.data:实际响应回来的数据
2.headers:响应头信息
3.status:响应状态码
4. statusText:响应状态信息
3.4 拦截器
3.4.1 请求拦截器
axios.interceptors.request.use(
function(config) {
config.headers.mytoken = "nihao";
return config;
},
function(err) {
// 这里处理错误信息
console.log(err);
}
);
3.4.2 响应拦截器(在获取数据之前对数据进行一些加工处理)
axios.interceptors.response.use(
function(res) {
// 处理返回的数据
return res;
},
function(err) {
// 这里处理错误信息
console.log(err);
}
);
4. async/await的基本用法
async function QueryData(id) {
const ret = await axios.get("http://loaclhost:3000/data");
return ret;
}
QueryData.then(ret => {
console.log(ret);
});
最后
以上就是野性音响为你收集整理的前后端交互(Promise、fetch、axios、async/awit用法)1.Promise概述2.fetch的基本用法3.axios的基本用法4. async/await的基本用法的全部内容,希望文章能够帮你解决前后端交互(Promise、fetch、axios、async/awit用法)1.Promise概述2.fetch的基本用法3.axios的基本用法4. async/await的基本用法所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复