常见网络请求方式

2024‎年‎2‎月‎11‎日，‏‎16:17:47

前言

本教程参考吴悠讲编程

基础学习

AJAX——原生请求方式

// 使用原生对象创建该实例
const ajax = new XMLHttpRequest()
// 配置服务接口
ajax.open('get','http://api.com/get?name=romcere&age=20')
// 发送请求
ajax.send()
// 获取响应数据
ajax.onreadystatechange = function(){
  // 若状态为4表示完成 若状态码为200则表示请求成功
  if(ajax.readyState === 4 && ajax.status === 200){
    console.log(ajax.responseText)	// 打印响应内容
    JSON.parse(ajax.responseText)	// 转化为json格式
  }
}
/* post请求 */
ajax.open('post','http://api.com/get')
// 设置请求头
ajax.setRequestHeader('Content-Type':'application/x-www-form-urlencoded')
ajax.send('name=romcere&age=20')

Axios——封装的库

(async () => {
  // 发送请求
  const res = await axios.get('http://api.com/get',{
    params:{
      name: 'romcere',
      age: 20
    }
  })
  // 获得响应数据
  console.log(res.data)
})
/* 更简易的书写方式 */
(async () => {
  // 二次封装axios对象
  const ins = axios.create({
    baseURL: 'http://api.com'
  })
  // 使用ins来进行请求，默认存在baseUrl
  const res = await ins.get('/get',{})
})

axios拦截器

const ins = axios.create({
  baseURL: 'http://api.com'
})
/* 请求拦截器 */
ins.interceptors.request.use(config => {
  console.log('发送了请求')
	return config
})
/* 响应拦截器 */
ins.interceptors.response.use(res => {
  console.log('接收了响应')
	return res
})

Fetch API——官方提供的库

fetch('http://api.com/get',{
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify{
    name: 'romcere',
    age: 20
  }
})
	// 发送成功则
	.then(res => {
    if(res.ok){
      return res.json()
    }
  })
  .then(data => {
    console.log(data)
  })