fetch封裝(增刪改查)
阿新 • • 發佈：2018-12-12
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script src="easyhttp.js"></script> <script src="app.js"></script> </body> </html>
封裝的js檔案內容(easyhttp.js)
/* * @Author: mikey.zhaopeng * @Date: 2018-09-27 20:03:13 * @Last Modified by: mikey.zhaopeng * @Last Modified time: 2018-09-27 21:20:53 */ class EasyHttp{ get(url){ return new Promise((resolve,reject)=>{ fetch(url) .then( res => res.json()) .then( data => resolve(data)) .catch(err => reject(err)) }) } // post方式 post(url,data){ return new Promise((resolve,reject)=>{ fetch(url,{ method:'POST', headers:{ 'Content-type':'application/json' }, body:JSON.stringify(data) }) .then( res => res.json()) .then( data => resolve(data)) .catch(err => reject(err)) }) } //put 修改 put(url,data){ return new Promise((resolve,reject)=>{ fetch(url,{ method:'PUT', headers:{ 'Content-type':'application/json' }, body:JSON.stringify(data) }) .then( res => res.json()) .then( data => resolve(data)) .catch(err => reject(err)) }) } //delete delete(url,data){ return new Promise((resolve,reject)=>{ fetch(url,{ method:'DELETE', headers:{ 'Content-type':'application/json' }, body:JSON.stringify(data) }) .then( res => res.json()) .then( data => resolve('資料刪除成功!')) .catch(err => reject(err)) }) } }
使用的js檔案內容:(app.js)
const http = new EasyHttp;
// get請求資料
http.get('http://jsonplaceholder.typicode.com/users')
.then((data) =>{
console.log(data)
})
.catch(err => console.log(err))
// post傳輸資料
const data = {
name:'carrie',
username:'渣渣芳',
email:'