分别使用ajax axios fetch 完成数据请求

1. ajax,要使用ajax完成数据请求,需要使用 XMLHttpRequest 对象。

代码示例:

function ajaxRequest(url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      callback(xhr.responseText);
    }
  };
  xhr.open('GET', url, true);
  xhr.setRequestHeader('User-Agent', 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36');
  xhr.send();
}

ajaxRequest('https://www.example.com/', (response) => {
  console.log('AJAX 请求完成:', response);
});

2.axios,需要引入axios模块

使用方式:

axios.get('url',{ params: { /*参数*/ } }).then(callback)

代码示例:

const axios = require('axios');
function runAxios () {
  axios.get('https://www.example.com/').then(res=>{
    console.log('axios 请求完成:', res);
  })
}
runAxios ()

3.使用 Fetch API 完成数据请求

代码示例:

async function fetchData(url) {
  const response = await fetch(url, {
    headers: {
      'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36'
    }
  });

  if (response.ok) {
    const data = await response.text();
    console.log('Fetch 请求完成:', data);
  } else {
    console.error('Fetch 请求失败:', response.status);
  }
}

fetchData('https://www.example.com/');

你可能感兴趣的:(ajax,前端,javascript)