ES6中Fetch的封装及使用，炒鸡简单~

之前写过一篇《ajax、axios、fetch之间的详细区别以及优缺点》戳这里

1.封装（http.js）

class Ajax {

  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))

    })

  }

}

export default new Ajax();//ES6导出

2.调用

import http from "./http.js"//引入方式 这里用的是ES6的方法，需要babel配合webpack打包

//普通引入使用src引入之后  const http = new Ajax();   即可

// get请求数据

http.get('http://jsonplaceholder.typicode.com/users')

  .then((data) => {

    console.log(data)

  })

  .catch(err => console.log(err))

// post传输数据

const data = {

  name: 'candy',

  username: 'candy',

  email: 'htmlcs@163.com'

};

//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))

这里有324.57GB的修仙资料。嘿嘿嘿你懂得。/手动狗头

那么问题来了，如果你也想入坑前端或者学习更多技术，广交天下朋友(基友)，认识更多有趣的灵魂的话，欢迎加入前端交流群鸭~

扫二维码加为好友就完事了！安排~

巴特西

ES6中Fetch的封装及使用，炒鸡简单~

1.封装（http.js）

2.调用

最新文章

热门文章

巴特西

ES6中Fetch的封装及使用，炒鸡简单~

1.封装 （http.js）

2.调用

最新文章

热门文章

1.封装（http.js）