Ajax、Fetch和Axios

Ajax
Ajax(Asynchronous JavaScript and XML,异步JavaScript.与XML技术)，使网页实现异步更新，不重新加载网页的情况下，对网页部分进行更新
不是一种新技术，而是2005年被提出的新术语
由XMLHttpRequestp的API实现
请求步骤

//创建XMLHttpRequest对象
const ajax new XMLHttpRequest();
//规定请求的类型、URL以及是否异步处理请求，通过MLHttpRequest对象的open()方法与服务端建立连接
ajax.open('GET',url,true);
//发送信息至服务器时内容编码类型
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送请求
ajax.send(null);
//监听服务端的通信状态，接受服务器响应数据
ajax.onreadystatechange function ()
if (ajax.readyState ==4 &(ajax.status =200 ajax.status =304)){}
}

特点：
·局部刷新页面，无需重载整个页面
·基于原生XHR开发，而XHR本身架构不清晰
·对基于异步的事件不友好
Fetch
fetch是底层API,代替XIHR,是真实存在的，基于promise实现
不是Ajax的封装，而是原生JS,没有使用XMLHttpRequest对象
特点：

使用promise,.支持async/await
提供的API丰富
脱离XHR
不携带cookie,需要手动添加配置项

Axios
Axios是一个基于promise封装的HTTP客户端，可以用在浏览器和node.js中
它本质也是对原生XMLHttpRequest的封装，只不过它是Promise的实现版本，符合最新的ES规范
特点：

从浏览器中创建XMLHttpRequests
从node.js创建http请求
支持Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF

axios({
    url:'xxx',//设置请求的地址
    method: "GET",//设置请求方法
    params:{//get请求使用params进行参数凭借，如果是post请求用data
      type:'',
      page:1
    }
}).then(res =>
  //res为后端返回的数据
    console.log(res);
})

设置接口请求前缀
利用ode环境变量判断，区分开发、测试、生产环境

if (process.env.NODE_ENV ==='development'){
axios.defaults.baseURL = 'http://dev.xxx.com'
else if (process.env.NODE_ENV ==='production'){
axios.defaults.baseURL = 'http://prod.xxx.com'

本地调试时，在config.js中配置proxy实现代理转发
设置请求头和超时时间

const service axios.create({
timeout:30000,//请求30s超时
headers:
get:
'Content-Type':application/x-www-form-urlencoded;charset=utf-8'
/在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
},
post:
'Content-Type':'application/json;charset=utf-8'
//在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
},
})

封装请求方法

//get请求
export function httpGet({
url,
params ={
}){
return new Promise((resolve,reject)=>{
axios.get(url,
params
}).then((res)=>{
resolve(res.data)
}).catch(err =>
reject(err)
})
})

请求拦截器
在每个请求里加上token,统一处理维护方便
响应拦截器
在接收到响应后先做一层判断，比如状态码判断登录状态、授权

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
</head>

<body>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    // 扩充后的影视、动漫角色名称列表
    const characterKeywords = ['Spider-Man', 'Batman', 'Superman', 'Naruto', 'Goku', 'Iron Man', 'Captain America', 'Thor', 'Wonder Woman', 'Black Widow', 'Hulk', 'Loki', 'Sasuke', 'Itachi', 'Gon Freecss', 'Killua Zoldyck', 'Ichigo Kurosaki', 'Rukia Kuchiki', 'Light Yagami', 'L', 'Eren Yeager', 'Mikasa Ackerman', 'Armin Arlert', 'Sailor Moon', 'Tuxedo Mask', 'Vegeta', 'Piccolo', 'Gohan', 'Trunks', 'Frieza', 'Cell', 'Majin Buu', 'Alucard', 'Inuyasha', 'Kagome Higurashi', 'Sango', 'Miroku', 'Edward Elric', 'Alphonse Elric', 'Winry Rockbell', 'Natsu Dragneel', 'Lucy Heartfilia', 'Gray Fullbuster', 'Erza Scarlet', 'Luffy', 'Zoro', 'Nami', 'Usopp', 'Sanji', 'Chopper', 'Robin', 'Franky', 'Brook', 'Asta', 'Yuno', 'Noelle Silva', 'Deku', 'Bakugo', 'Todoroki'];

    let usernames = [];
    let iterationCount = 0;
    const maxIterations = 20;
    const minValidUsers = 10;

    async function iterateAndValidate() {
      if (iterationCount >= maxIterations || usernames.length >= minValidUsers) {
        return;
      }
      let username = '';
      const randomKeyword = characterKeywords[Math.floor(Math.random() * characterKeywords.length)];
      username = `${randomKeyword}`;

      try {
        const response = await axios.get(`https://api.github.com/users/${username}`);
        usernames.push(username);
      } catch (error) {
        // 忽略不存在的用户
      }
      iterationCount++;
      return iterateAndValidate();
    }

    iterateAndValidate().then(() => {
      const userInfoPromises = usernames.map(username => axios.get(`https://api.github.com/users/${username}`));
      return Promise.all(userInfoPromises);
    }).then(responses => {
      // 对多个用户信息进行分析
      const totalFollowers = responses.reduce((acc, response) => acc + response.data.followers, 0);
      const averageFollowers = totalFollowers / responses.length;
      console.log(`平均粉丝数：${averageFollowers}`);

      const popularUsers = responses.filter(response => response.data.followers > averageFollowers);
      console.log('粉丝数高于平均的用户：');
      popularUsers.forEach(user => console.log(user.data.login));

      const userInfoDiv = document.createElement('div');
      userInfoDiv.innerHTML = `<p>平均粉丝数：${averageFollowers}</p><p>粉丝数高于平均的用户：${popularUsers.map(user => user.data.login).join(', ')}</p>`;
      document.body.appendChild(userInfoDiv);
    }).catch(error => {
      console.error('发生错误：', error);
    });
  </script>
</body>

</html>

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。