当前位置：首页 > article >正文

前端网络请求

article 2025/3/22 11:45:58

为什么需要做网络请求？

例如哔哩哔哩官网上展现的资源其实都是通过请求获取的：

是从霹雳霹雳服务器上请求信息，然后传输到客户端本地（浏览器）

页面资源越多，传输的的次数越多，每一次的传输就被称为一次请求

前端向后端请求有三种方式：ajax(原生),axios（第三方库）,fetch（替代原生ajax的API）

网络请求的三种方式

ajax

控制台的NetWork的fetch/XHR是监控网络请求的部分

原生的ajax是通过new一个SXMLHttpRequest对象来进行生成的

//原生ajax
const xhr = new XMLHttpRequest()
//GET请求，发送请求的一种方式，第二个url为请求的地址，第三个参数为是否异步
xhr.open('GET', 'https://api.github.com/users/zhufengpeixun/repos', true)
xhr.send()

获取后发送请求，可以在NetWork下面看见一个新的请求

点击Header可以看见请求的url、方式、状态码

打开Response界面，服务器接收到我的请求以后会把我请求的相应资源发还给我，这个发回的过程我们称为响应

我们希望可以对响应回来的数据进行接收和处理，在这里我们可以通过几种方式操作

//原生ajax
const xhr = new XMLHttpRequest()
//GET请求，发送请求的一种方式，第二个url为请求的地址，第三个参数为是否异步
xhr.open('GET', 'https://api.github.com/users/zhufengpeixun/repos', true)
xhr.send()
//对响应进行操作，使用onreadystatechange事件来接收
xhr.onreadystatechange = function () {
    //在事件内部监听请求发送的状态，状态一旦改变就会触发事件
    //如果请求成功，readyState的状态码为4，或者通过XMLHttpRequest.Done来判断
    //确保响应完成，通过一个XMLHTTPRequest对象的status属性来获取，200表示响应成功
    if (xhr.readyState === 4 && xhr.status === 200) {
    //输出响应内容
    console.log(xhr.responseText)//类型为字符串
  }
}

获取到的数据是字符串

用JSON.parse()转回对象

如果在github上访问的话次数多了会报错：

GET除了进行请求操作，还可以在请求时发送一些数据，也就是在获取数据的时候向服务端发送一些额外的数据，这时候可以在请求的地址后面以【?】的方式拼接一些信息，这些信息被称为请求参数

另外，我这个github提供的接口是不支持根据URL+?的结构筛选出结果的

换个api：

//原生ajax
const xhr = new XMLHttpRequest()
//GET请求，发送请求的一种方式，第二个url为请求的地址，第三个参数为是否异步
xhr.open('GET', 'https://randomuser.me/api/?results=10&gender=female', true)
//属性=值&属性=值，获取性别为女的用户
xhr.send()
//对响应进行操作，使用onreadystatechange事件来接收
xhr.onreadystatechange = function () {
    //在事件内部监听请求发送的状态，状态一旦改变就会触发事件
    //如果请求成功，readyState的状态码为4，或者通过XMLHttpRequest.Done来判断
    //确保响应完成，通过一个XMLHTTPRequest对象的status属性来获取，200表示响应成功
    if (xhr.readyState === 4 && xhr.status === 200) {
    //输出响应内容
        //console.log(xhr.responseText)//类型为字符串
        //转为json对象
        console.log(JSON.parse(xhr.responseText))
  }
}

获取性别为女的

这样就完成了一次完整的请求加响应的过程

除了发送GET请求还可以发送POST请求，POST的含义是发送，发送给服务端让服务端完成一些操作，

进行POST请求的时候，除了可以发送普通文本，还可以发送多种格式的文件，例如图片、视频

单纯的GET请求只能发送纯文本，所以在使用POST请求的时候就需要告诉服务端你传输的是哪种格式的文本，所以我们需要在send()前添加xhr.setRequestHedaer()，这叫做设置请求头

//原生ajax
const xhr = new XMLHttpRequest()
//POST请求，发送请求的一种方式,第二个url为请求的地址，第三个参数为是否异步
xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true)
//设置请求头，Content-Type为请求的数据类型，application/x-www-form-urlencoded为表单数据（发送的数据类型为属性=值&属性=值的类型），'application/json'为json数据
xhr.setRequestHeader('Content-Type', 'application/json')
//通过send方法发送请求json数据，将数据转为字符串
const data = JSON.stringify({
  title: 'foo',
  body: 'bar',
  userId: 1
})
xhr.send(data)
//对响应进行操作，使用onreadystatechange事件来接收
xhr.onreadystatechange = function () {
    //在事件内部监听请求发送的状态，状态一旦改变就会触发事件
    //如果请求成功，readyState的状态码为4，或者通过XMLHttpRequest.Done来判断
    //确保响应完成，通过一个XMLHTTPRequest对象的status属性来获取，201表示POST响应成功
    if (xhr.readyState === 4 && xhr.status === 201) {
    //输出响应内容
        //console.log(xhr.responseText)//类型为字符串
        //转为json对象
        console.log(JSON.parse(xhr.responseText))
  }
}

可以看见发送正常

也可以正常在控制台看见数据：

可以看见ajax很麻烦，所以在开发中更多用的是第三方库

axios

axios库提供axios，是一个对象也是一个函数，也可以使用get发送get请求

//axios
//这一段话是在react中使用axios的方法，取代了上面jd原生的方法
//axios做了相应的逻辑封装，使得请求更加简单
(async () => {
    const res1 = await axios.get('https://randomuser.me/api/', {
        params: {
            results: 10,
            gender:'female'
        }
    })
    
    console.log(res1.data)
})()

就这样发送GET请求：

发送POST请求：

//axios
//这一段话是在react中使用axios的方法，取代了上面jd原生的方法
//axios做了相应的逻辑封装，使得请求更加简单
(async () => {
    const res1 = await axios.get('https://randomuser.me/api/', {
        params: {
            results: 10,
            gender:'female'
        }
    })
    //console.log(res1.data)
    const res2 = await axios.post('https://randomuser.me/api/', {
      //不用写params，直接写data
            results: 10,
            gender:'female'
    })
    console.log(res2.data)
})()

404了孩子们，因为这个API只支持GET请求，不支持POST请求

我们换个API，值得注意的是POST请求的响应成功码为201：

在发送不同请求的时候，url前面相同的部分被称为基地址（baseURL）

如果你希望在多个接口中把基地址提取出来，一种方法是自己拼，另一种方式可以用axios的配置来做处理；axios可以提供一个create来让我们进行一些自定义的对象功能设置

这样请求的时候可以少写一个baseURL，然后写一个请求拦截器，中间可以对请求做处理，判断是什么请求

也可以写一个响应拦截器，在每一个请求接收到响应之前做一个预处理，例如对格式做处理

也就是一个GET请求是先发送=》请求拦截器=》响应拦截器=》请求成功接收响应

Fetch API

Fetch发送GET请求

//Fetch API
//返回值是promise
fetch('https://randomuser.me/api/?results=10&gender=female').then(res => {
   if(res.ok){
       return res.json()
   }
}).then(data => {
    console.log(data)
})
//fetch请求方式

发送POST请求

//Fetch API
//发送GET请求，返回值是promise
fetch('https://randomuser.me/api/?results=10&gender=female').then(res => {
   if(res.ok){
       return res.json()
   }
}).then(data => {
    console.log(data)
})
//发送POST请求，返回值是promise
fetch('https://reqres.in/api/users', {
    method: 'POST',
    //设置请求头
    headers: {
        'Content-Type': 'application/json'
    },
    //设置请求体
    body: JSON.stringify({
        "name": "August",
        "job": "Frontend Developer" 
    })
}).then(res => {
   if(res.ok){
       return res.json()
   }
}).then(data => {
    console.log(data)
})

发送成功