网络请求发送

私人博客

许小墨のBlog —— 菜鸡博客直通车

系列文章完整版，配图更多，CSDN博文图片需要手动上传，因此文章配图较少，看不懂的可以去菜鸡博客参考一下配图！

系列文章目录

前端系列文章——传送门
后端系列文章——传送门

---

---

网络请求

现代的前端项目都是前后端分离开发模式进行的，也就避免不了前端需要给后端服务器发送网络请求，对数据进行增删改查的操作。

发起网络请求的方法我们可以总结为4种：

• xhr - 原生的ajax

  • 缺点：代码繁多

  • 语法：

    const xhr = new XMLHttpRequest()
    xhr.open(请求方式, 请求路径, 是否异步)
    xhr.send()
    xhr.onreadystatechange = function() {if(xhr.readyState === 4) {if(xhr.status >= 200 && xhr.status < 300) {let res = xhr.responseText}}
    }xhr.onload = function() {let res = xhr.responseText
    }
    

    其他请求方式的原理，就是原生ajax

• jquery的ajax请求 - jquery库封装好的ajax请求

  • 语法

    • 下载

    • 引入

      $.get(路径, 成功回调函数, 希望返回的数据格式)
      $.post(路径, 成功回调函数, 希望返回的数据格式)
      $.ajax({url: '',method: '',data: '',dataType: '',async: true,success: res => {},error: res => {}
      })
      

  • 优点：功能强大，内置promise

  • 缺点：jquery大部分代码是封装的dom，有牛刀宰鸡的感觉

• fetch - H5自带的请求

  • 语法：

    fetch(路径, {method: '',body: '携带的数据'
    }) // 返回promise对象
    .then(resp => {// resp是一个响应对象 - 可以通过resp决定后续希望得到的数据格式return resp.text()return resp.json()
    })
    .then(res => {// res是最终得到的结果数据
    })
    

  • 优点：不用下载，内置，写法简单

  • 缺点：需要then两次

• axios - 现在比较流行的ajax封装

  • 语法：

    • 下载

    • 引入

      axios.get(路径).then(res => {})
      axios.post(路径, 请求主体).then(res => {})
      axios({method: '',url: '',headers: {},data: ''
      }).then(res => {})
      

    • 全局配置

      axios.defaults.baseURL = 'http://localhost:8888'// 设置基准地址
      axios.defaults.headers['Authorization'] = 'token令牌'// 设置请求头信息，通用头信息
      

  • 优点：写法简单，功能强大

  • 缺点：第三方的，需要下载

我们在企业项目中，通常使用fetch和axios来发送请求。

---

注

本博文缺失大量图片，严重影响内容完整性以及阅读体验，完整内容请前往本人菜鸡博客——许小墨のBlog