axios与fetch
axios
axios是什么
axios是一个基于PRominse的HTTP库，可以用在浏览器和node.js中
第三方Ajax库
http://www.axios-js.com/zh-cn/docs/
axios的基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>axios</title>
</head>
<body>
<!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
<script src="https://unpkg.com/axios@1.3.4/dist/axios.min.js"></script>
<script>
//1.axios是什么
//axios是一个基于PRominse的HTTP库，可以用在浏览器和node.js中
//第三方Ajax库
//http://www.axios-js.com/zh-cn/docs/
//2.axios的基本用法
//引入axios
//console.log(axios);
const url = 'https://www.imooc.com/api/http/search/suggest?words=js'
// axios(url,{
// method:'post',
// //请求时的头信息
// headers:{
// 'Content-Type':'application/x-www-form-urlencoded'
// /* 'Content-Type':application/JSON */
// },
// //通过请求头携带的数据
// params:{
// username:'lyw'
// },
// //通过请求体携带的数据
// // data:{
// // age:18,
// // sex:'male'
// // }
// data:'age=18&sex=male',
// //timeout:10
// //withCredentials:true
// }).then(Response =>{
// console.log(Response);
// console.log(Response.data.data);
// }).catch(err => {
// console.log(err);
// });
// axios.get(url,{
// params:{
// username='lyw'
// }
// })
// .then(Response => {
// console.log(Response);
// });
axios.post('https://www.imooc.com/api/http/search/suggest?words=js',{
username:'alex'
}).then(Response => {
console.log(Response);
}).catch(err =>{
console.log(err);
});
// axios.put()
// axios.delete()
</script>
</body>
</html>
fetch
1.Fetch是什么
Fetch也是前后端通信的一种方式
Fetch是ajax(xmlhttprequest)的一种替代方案，它是基于promise的
Ajax的兼容性比Fetch好，同时Fetch原生没有提供abort和timeout
2.Fetch的基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fetch</title>
</head>
<body>
<script>
// Fetch
// 1.Fetch是什么
// Fetch也是前后端通信的一种方式
// Fetch是ajax(xmlhttprequest)的一种替代方案，它是基于promise的
// Ajax的兼容性比Fetch好，同时Fetch原生没有提供abort和timeout
// 2.Fetch的基本用法
// fetch调用后返回的是promise对象，因为它是基于promise
const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
// body: (...) body数据流 只能读取一次
// bodyUsed: false 是否读取的标志，读取后为false
// ok: true
// status: 200 状态码
// statusText: "OK" 状态文本
// type: "cors"
// url: "https://www.im
// 第二个参数用来设置fetch
// 还可以传formdata数据 body:fd
const fd=new FormData();
fetch(url, {
method: 'post',
body: 'username=alex&age=18',
// 如果想传json格式要设置stringify
// body:JSON.stringify({username:'alex'}),
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
// 'Content-Type': 'application/json'
},
// 如果要跨域资源共享要设置cors，但是默认都是cors
mode:'cors',
// 跨域是否携带cookie 不是布尔值要携带需要设置成字符串的include
credentials:'include'
})
.then(response => {
console.log(response);
// body/bodyUsed body请求体
// body 只能读一次，读过之后就不让再读了，bodyUsed变成true
// ok
// 如果为 true，表示可以读取数据，不用再去判断 HTTP 状态码了
if (response.ok) {
// response.json是读取body的数据，那么返回后是一个promise对象，需要在then中输出
return response.json(); //返回的是json数据
// return response.text(); 返回的是文本类型
} else {
throw new Error(`HTTP CODE异常${response.status}`);
}
}).then((data => {
console.log(data);
}))
.catch(err => {
console.log(err);
})
</script>
</body>
</html>
浙公网安备 33010602011771号