zoukankan      html  css  js  c++  java
  • 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的修仙资料。嘿嘿嘿你懂得。/手动狗头
    前端入坑全套教学视频
    那么问题来了,如果你也想入坑前端或者学习更多技术,广交天下朋友(基友),认识更多有趣的灵魂的话,欢迎加入前端交流群鸭~
    扫码加群哦
    扫二维码加为好友就完事了!安排~

  • 相关阅读:
    C#初识
    SQL 语言基础
    类;类型
    输入一元二次方程的三个参数,a,b,c,判断是否为一元二次方程,并求解
    输入一个1-100之内的数,判断是否跟7有关
    输入身高、体重、性别,判断是否是标准体重,男性标准=(身高-100)+-3,女性标准=(身高-110)+-3
    分别录入年月日,判断是否是一个正确的日期
    面向对象基础--面向对象思想(理解)
    2015-01-04 Javascript
    2014-12-28 iframe,style,body style
  • 原文地址:https://www.cnblogs.com/twodog/p/11986168.html
Copyright © 2011-2022 走看看