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

到这里就结束了，感谢WebCandy博主

参考地址：https://blog.csdn.net/twodogya/article/details/84840599