前端知识总结之Ajax,axios,fetch篇

1 .什么是Ajax

• Ajax(Asynchronous Javascript And XML)异步的JavaScript和XML
• Ajax是浏览器提供的一套API
• 可以通过JavaScript调用ajax提供的API和服务器进行交互
• Ajax的核心对象是XMLHttpRequest

2 .应用场景

• 按需获取数据
  • 百度地图加载,留言评论等功能
• 用户数据的校验
  • 注册时,验证用户名或者邮箱是否注册
• 自动更新页面内容
  • 邮件提醒,消息提醒
• 提升用户体验,无刷新的体验

3. axios

• 特点:
  • 基于promise的http库
  • 支持Promise所有 API
  • 安全性更高,客户端支持防御XSRF
  • 可以转换请求数据和响应数据,并对响应回来的内容自动转换成JSON类型的数据
  • 可以拦截请求和响应

axios.get('/user',{
    params: {
        id: 123456
    }
})
    .then(function (res){
        console.log(res)
    })
    .catch(function(err){
        console.log(err)
    })

4. Fetch API

• Fetch响应结果的数据格式为:
  • res.text() 获取字符串形式数据
  • res.json() 直接获取json数据

  fetch('http://localhost:3000/data')
      .then(res=>{
          return res.json();
      }).then(res=>{
      console.log(res.username)
  })
  

• Fetch API优点:
  • 语法简洁,更加语义化
  • 基于标准Promise实现,支持async,await

5 .axios,fetch,ajax的区别

• 主要区别是axios,fetch请求后都支持Promise对象API,ajax只能用回调函数
• axios支持请求/响应拦截,可以自动转换JSON数据
• fetch提供了丰富的api,更加底层化