fetch概述
基本特性
- 更加簡單的數據獲取方式,功能更強大、更靈活,可以看做是xnr的升級版
- 基於Promise實現
語法結構
fetch(url).then(fn2) .then(fn3) ... .catch(fn)
fetch的基本用法
fetch('/abc').then(function(data){ //text()屬於feych的API的一部分,返回的是一個Promise實例對象,用於獲取后台返回的數據 return data.text); }.then(data => {
console.log(data);
}))
fetch請求參數
常用配置選項
- method(String):HTTP請求方法,默認為GET(GET、POST、PUT、DELETE)
- body(String):HTTP的請求參數
- headers(Object):HTTP的請求頭,默認{}
fetch('/abc',{ methods: 'GET' }) .then(data => { return data.text); }.then(ret => { //注意這里得到的才是最終的數據 console.log(ret); }));
GET請求方式傳遞參數
fetch('/abc/123',{ methods: 'GET' }) .then(data => { return data.text); }.then(ret => { //注意這里得到的才是最終的數據 console.log(ret); }));
后台獲取數據
app.get('/abc/:id',(req,res) => {
res.send('Restful形式的URL傳遞參數!' + req.params.id);
})
DELETE請求方式傳遞參數
fetch('/abc/123',{ methods: 'DELETE' }) .then(data => { return data.text); }.then(ret => { //注意這里得到的才是最終的數據 console.log(ret); }));
DELETE后台獲取數據
app.delete('/abc/:id',(req,res) => { res.send('delete形式的URL傳遞參數!' + req.params.id); })
POST請求方式傳遞參數
fetch('/abc',{ methods: 'POST',
//用於傳遞實際參數
body : 'uname=list&pwd=123',
//進行配置 必須設置
headers:{
'Content-Type' : 'application/x-www-form-urlencode'
} }) .then(data => { return data.text); }.then(ret => { console.log(ret); }));
后台獲取數據
app.post('/abc',(req,res) => { res.send('Restful形式的URL傳遞參數!' + req.bbody.uname + '---' + req.body.pwd); })
POST請求方法的JSON參數傳遞
fetch('/abc',{ methods: 'POST', body : JSON.stringify({
uname : 'list',
pwd : 123
}),
headers:{ 'Content-Type' : 'application/json' } }) .then(data => { return data.text); }.then(ret => { console.log(ret); }));
PUT請求方式傳遞參數
fetch('/abc/123',{ methods: 'put', body : JSON.stringify({
uname : 'list',
pwd : 123
}),
headers:{ 'Content-Type' : 'application/json' }}) .then(data => {
return data.text);
}.then(ret => {
console.log(ret);
})
);
后台獲取數據
app.get('/abc/:id',(req,res) => { res.send('put形式的URL傳遞參數!' + req.params.id + req.bbody.uname + '---' + req.body.pwd);
})
fetch響應結果
響應數據格式
- text():將返回體處理成字符串類型
- json():返回結果和JSON.parse(reponseText)一樣
fetch('/abc') .then(data => { return data.text); }.then(ret => { //注意這里得到的才是最終的數據 console.log(ret); }));