fetch封装(增删改查)

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:'[email protected]'
    };
    //post user
    http.post('http://jsonplaceholder.typicode.com/users',data)
        .then(data => console.log(data))
        .catch(err => console.log(err))

    // update user ,修改后会发现修改后ID为2的数据会变成上页面定义的data
    http.put('http://jsonplaceholder.typicode.com/users/2',data)
    .then(data => console.log(data))
    .catch(err => console.log(err))

    
        //delete user 删除下标为2里的数据  

        http.delete('http://jsonplaceholder.typicode.com/users/2',data)
        .then(data => console.log(data))
        .catch(err => console.log(err))

fetch封装(增删改查)

猜你喜欢