1.Fetch
- Fetch API is the new ajax solution Fetch will return Promise
- fetch is not a further encapsulation of ajax, but native js, without using the XMLHttpRequest object .
<script type="text/javascript">
/*
Fetch API 基本用法
*/
fetch('http://localhost:3000/fdata').then(function(data){
// text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据
return data.text();
}).then(function(data){
console.log(data);
})
</script>
http request in fetch API:
- Use form: fetch(url, options).then()
- HTTP protocol, which provides us with many methods, such as POST, GET, DELETE, UPDATE, PATCH and PUT
- The default request is get; you need to specify the corresponding method method in the options object method: the method used for the request; you need to set the request header headers and body in options for post and ordinary requests;
<script type="text/javascript">
// GET参数传递-传统URL
// fetch('http://localhost:3000/books?id=123', {
// method: 'get'
// })
// .then(function(data){
// return data.text();
// }).then(function(data){
// console.log(data)
// });
// GET参数传递-restful形式的URL
// fetch('http://localhost:3000/books/456', {
// method: 'get'
// })
// .then(function(data){
// return data.text();
// }).then(function(data){
// console.log(data)
// });
// DELETE请求方式参数传递
// fetch('http://localhost:3000/books/789', {
// method: 'delete'
// })
// .then(function(data){
// return data.text();
// }).then(function(data){
// console.log(data)
// });
// POST请求传参
// fetch('http://localhost:3000/books', {
// method: 'post',
// body: 'uname=lisi&pwd=123',
// headers: {
// 'Content-Type': 'application/x-www-form-urlencoded'
// }
// })
// .then(function(data){
// return data.text();
// }).then(function(data){
// console.log(data)
// });
// POST请求传参
// fetch('http://localhost:3000/books', {
// method: 'post',
// body: JSON.stringify({
// uname: '张三',
// pwd: '456'
// }),
// headers: {
// 'Content-Type': 'application/json'
// }
// })
// .then(function(data){
// return data.text();
// }).then(function(data){
// console.log(data)
// });
// PUT请求传参
fetch('http://localhost:3000/books/123', {
method: 'put',
body: JSON.stringify({
uname: '张三',
pwd: '789'
}),
headers: {
'Content-Type': 'application/json'
}
})
.then(function(data){
return data.text();
}).then(function(data){
console.log(data)
});
</script>
Response format in fetchAPI :
use fetch to get data. If the response returns normally, the first thing we see is a response object, which includes a bunch of original bytes returned. After receiving these bytes, we need to call the method Convert it to data in the appropriate format, e.g. JSON, BLOBor TEXTetc.
<script type="text/javascript">
fetch('http://localhost:3000/json').then(function(data){
// return data.json();
return data.text();
}).then(function(data){
// console.log(data.uname)
// console.log(typeof data)
var obj = JSON.parse(data);
console.log(obj.uname,obj.age,obj.gender)
})
</script>
2. Axios (need to introduce axios.js)
- Promise based http client for browser and node.js
- Supports browser and node.js
- support promises
- Can intercept requests and responses
- Automatically convert JSON data
- Can transform request and response data
Basic usage method:
- Get and delete request pass parameters: Pass parameters in the form of ? through the traditional url; pass parameters in restful form; pass parameters in the form of params
- Post and put request passing parameters: passing parameters through options (object form); passing parameters through URLSearchParams
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript">
/*
axios请求参数传递
*/
// axios get请求传参
// axios.get('http://localhost:3000/axios?id=123').then(function(ret){
// console.log(ret.data)
// })
// axios.get('http://localhost:3000/axios/123').then(function(ret){
// console.log(ret.data)
// })
// axios.get('http://localhost:3000/axios', {
// params: {
// id: 789
// }
// }).then(function(ret){
// console.log(ret.data)
// })
// axios delete 请求传参
// axios.delete('http://localhost:3000/axios', {
// params: {
// id: 111
// }
// }).then(function(ret){
// console.log(ret.data)
// })
// axios.post('http://localhost:3000/axios', {
// uname: 'lisi',
// pwd: 123
// }).then(function(ret){
// console.log(ret.data)
// })
// var params = new URLSearchParams();
// params.append('uname', 'zhangsan');
// params.append('pwd', '111');
// axios.post('http://localhost:3000/axios', params).then(function(ret){
// console.log(ret.data)
// })
// axios put 请求传参
axios.put('http://localhost:3000/axios/123', {
uname: 'lisi',
pwd: 123
}).then(function(ret){
console.log(ret.data)
})
</script>
Axios global configuration:
# 配置公共的请求头
axios.defaults.baseURL = 'https://api.example.com';
# 配置 超时时间
axios.defaults.timeout = 2500;
# 配置公共的请求头
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
# 配置公共的 post 的 Content-Type
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
Axios interceptor:
1. Request interceptor: the function of the request interceptor is to perform some operations before the request is sent
2. Response interceptor: the function of the response interceptor is to perform some operations after receiving the response
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript">
axios.interceptors.request.use(function(config) {
console.log(config.url)
config.headers.mytoken = 'nihao';
return config;
}, function(err){
console.log(err)
})
axios.interceptors.response.use(function(res) {
// console.log(res)
var data = res.data;
return data;
}, function(err){
console.log(err)
})
axios.get('http://localhost:3000/adata').then(function(data){
console.log(data)
})
</script>