网络请求发送

私人博客

许小墨の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