【JavaScript】从AJAX到Fetch、axios

最新推荐文章于 2024-07-28 11:18:28 发布
最新推荐文章于 2024-07-28 11:18:28 发布
阅读量293 收藏
点赞数
分类专栏： JavaScript 文章标签： ajax js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42033567/article/details/105882759
版权

目录


前言：

在前后端交互的过程中，有很多数据请求的方式，例如AJAX、Fetch、axios等等，下面就一一来简单列举一下。

我们先来看一下URL的两种的形式：

  1. 传统的URL格式如下：
scheme://host:port/path?query#fragment

其中：

scheme: 表示协议，如Http, Https, Ftp等；
host: 表示所访问资源所在的主机名：如：www.baidu.com;
port: 表示端口号，默认为80；
path: 表示所访问的资源在目标主机上的储存路径；
query: 表示查询条件；
fragment：表示锚点（哈希），用于定位页面的某个位置。

例如： http://www.baidu.com/search?words=Baidu
  1. restful形式的URL

（1）HTTP的请求方式：

  • GET 查询
  • POST 添加
  • PUT 修改
  • DELETE 删除

（2）符合规则的URL：（提交方式不同）

http://www.hello.com/books  GET
http://www.hello.com/books  POST
http://www.hello.com/books/123  PUT（对id为123的数据进行修改）
http://www.hello.com/books/123  DELETE（对id为123的数据进行删除）

1. AJAX

1.1 简介

AJAX 是 Asynchronous JavaScript and XML 的缩写，指的是通过 JavaScript 的异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。

1.2 特点
  1. 优点
  • 不需要插件支持（一般浏览器且默认开启 JavaScript 即可）
  • 用户体验极佳（不刷新页面即可获取可更新的数据）
  • 提升 Web 程序的性能（在传递数据方面做到按需发送，不必整体提交）
  • 减轻服务器和带宽的负担（将服务器的一些操作转移到客户端）
  1. 缺点
  • 前进、后退的功能被破坏（因为 AJAX 永远在当前页，不会记录前后页面）
  • 搜索引擎的支持度不够（因为搜索引擎爬虫还不能理解 JS 引起变化数据的内容）
1.3 常见状态码
100 ~ 199 表示连接继续
200 ~ 299 表示各种意义上的成功
300 ~ 399 表示重定向
400 ~ 499 表示各种客户端错误
500 ~ 599 表示各种服务端错误
1.4 使用方法

AJAX 包括以下几个步骤:

  1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象
  2. 创建一个新的HTTP请求,并指定其请求的方法、URL及验证信息
  3. 设置响应 HTTP 请求状态变化的函数
  4. 发送 HTTP 请求
  5. 获取异步调用返回的数据
  6. 使用 JavaScript 和 DOM 实现局部刷新
//原生AJAx
    var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象;
    request.onreadystatechange = function () { // 状态发生变化时，函数被回调;
        if (request.readyState === 4) { // 成功完成
            // 判断响应结果:
            if (request.status === 200) {
                // 成功，通过responseText拿到响应的文本:
            } else {
                // 失败，根据响应码判断失败原因:
            }
        } else {
            // HTTP请求还在继续...
        }
    }
    // 发送请求:
    request.open("POST","/skill-ajax/a/login",true);
    request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    request.send();
    alert('请求已发送，请等待响应...');

  // readyState值说明
  // 0,初始化,XHR对象已经创建,还未执行open
  // 1,载入,已经调用open方法,但是还没发送请求
  // 2,载入完成,请求已经发送完成
  // 3,交互,可以接收到部分数据

  // status值说明
  // 200:成功
  // 404:没有发现文件、查询或URl
  // 500:服务器产生内部错误

使用jQuery进行AJAX请求：

//jQuery中的AJAX
$.ajax({
    method: 'GET', // 1.9.0本版前用'type'
    url: url,
    data: data,
    dataType: dataType,
    success: function() {
       console.log('执行成功');
    },
    error: function() {
       console.log('执行出错');
    }
})

使用jQuery进行AJAX请求时它具有以下特点：
（1）优点：

  • 对原生XHR的封装，做了兼容处理，简化了使用
  • 增加了对JSONP的支持，可以简单处理部分跨域

（2）缺点：

  • 如果有多个请求，并且有依赖关系的话，容易形成回调地狱
  • 本身是针对MVC的编程，不符合现在前端MVVM的浪潮
  • ajax是jQuery中的一个方法。如果只是要使用ajax却要引入整个jQuery，很不合理
1.5 使用Promise封装AJAX

这里不多做介绍，之前写了一篇相关文章：利用Promise封装Ajax中get和post方法

2. Fetch

2.1 Fetch简介

Fetch是基于Promise实现的，支持 async/await，它有更加简单的数据获取方式，功能更加强大、更灵活，可以看做是xhr的升级版。

// 原生XHR
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)   // 从服务器获取数据
    }
}
xhr.send()

// fetch
fetch(url)
    .then(response => {
            return response.json();
    })
    .then(data => console.log(data)) // 这里得到的才是真正的数据
    .catch(error => console.log(error))
2.2 常用参数

常用的参数配置：
（1）method(String): HTTP请求方法，默认为GET (GET、POST、PUT、DELETE)
（2）body(String): HTTP的请求参数
（3）headers(Object): HTTP的请求头,默认为{}

2.3 基本用法
  1. GET 请求方式
//使用普通URL进行传递参数
fetch('/abc?id=123')
    .then(response => {
            return response.json();
    })
    .then(data => console.log(data)) 
    .catch(error => console.log(error))
    
// 使用restful形式进行传参
fetch('/abc/123',{
       method:'get'
    }).then(response => {
            return response.json();
    }).then(data => console.log(data)) 
    .catch(error => console.log(error))
  1. DELETE请求方式

delete请求方式和get方式类似：

//使用普通URL进行传递参数
fetch('/abc?id=123',{
     method:'delete'
  }).then(response => {
            return response.json();
  }).then(data => console.log(data)) 
    .catch(error => console.log(error))
    
// 使用restful形式进行传参
fetch('/abc/123',{
       method:'delete'
    }).then(response => {
            return response.json();
    }).then(data => console.log(data)) 
    .catch(error => console.log(error))
  1. POST请求方式
//以普通参数形式请求
fetch('/abc',{
     method:'post'，
     body:'uname=zhangsan&psw=123',
     headers:{
        'Content-Type' : 'application/X-www-form-urlencoded'
     }
  }).then(response => {
            return response.json();
  }).then(data => console.log(data)) 
    .catch(error => console.log(error))

// 以json格式进行请求
 fetch('/abc',{
     method:'post'，
     body:JSON.stringify({
         uname:'zhangsan',
         psw:'123'
     })    
     headers:{
        'Content-Type' : 'application/json'
     }
  }).then(response => {
            return response.json();
  }).then(data => console.log(data)) 
    .catch(error => console.log(error))
  1. PUT请求方式

put请求方式和post类似：

//以普通参数形式请求
fetch('/abc/123',{   //123要修改数据的id
     method:'put'，
     body:'uname=zhangsan&psw=123',
     headers:{
        'Content-Type' : 'application/X-www-form-urlencoded'
     }
  }).then(response => {
            return response.json();
  }).then(data => console.log(data)) 
    .catch(error => console.log(error))

// 以json格式进行请求
 fetch('/abc/123',{
     method:'put'，
     body:JSON.stringify({
         uname:'zhangsan',
         psw:'123'
     })    
     headers:{
        'Content-Type' : 'application/json'
     }
  }).then(response => {
            return response.json();
  }).then(data => console.log(data)) 
    .catch(error => console.log(error))
2.4 响应结果

Fetch响应数据的格式主要有以下两种：

  • text():将返回体处理成字符串类型
  • json():返回结果和JSON.parse(responseText)一样

我们上面使用的是json()格式，如果想用text()格式，直接替换即可。

2.5 特点

（1）优点：

在配置中，添加mode：'no-cors'就可以跨域了

fetch('/users.json', {
    method: 'post', 
    mode: 'no-cors',
    data: {}
}).then(function() { /* handle response */ });

（2）缺点：

  • fetch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理
  • fetch默认不会带cookie，需要添加配置项。
  • fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费。
  • fetch没有办法原生监测请求的进度，而XHR可以。

3. axios

3.1 axios简介

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

Vue作者尤雨溪推荐使用axios进行数据请求。

axios具有以下特点：

  • 支持浏览器和 node.js
  • 支持 promise
  • 能拦截请求和响应
  • 自动转换JSON数据
  • 提供了并发请求的接口
3.2 基本用法
  1. GET请求和DELETE请求

get请求和delete请求的用法类似，下面只写get请求：

//通过传统的URL地址传递参数
axios.get('/user?id=12345')
  .then(function (response) {
    console.log(response);      // 这是返回的一个封装好的对象
    console.log(response.data); // 这才是后台响应的真正的数据
  })
  .catch(function (error) {
    console.log(error);
  });
  
//通过restful形式的URL进行传参
axios.get('/user/id=12345')
  .then(function (response) {
    console.log(response);      
    console.log(response.data); 
  })
  .catch(function (error) {
    console.log(error);
  });
  
//通过params对象传递参数
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
  1. POST请求和PUT请求

post和put类似，这里只列举post请求方式：

// 通过默认选项传参（默认传递的是json形式的数据）
axios.post('/user', {
     uname:'zhangsan',
     psw:'123'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

//通过URLSearchParams传递参数(application/x-www-form-urlencoded)

const params = new URLSeardhParams(); 
params . append('uname', 'zhangsan');
params . append ('psw', '123');

axios.post('/user', params)
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
  1. 并发请求
function getUserAccount(){
  return axios.get('/user/12345');
}
function getUserPermissions(){
  return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(),getUserPermissions()])
  .then(axios.spread(function(acct,perms){
    //当这两个请求都完成的时候会触发这个函数，两个参数分别代表返回的结果
  }))
3.3 响应结果

我们上文中只说了响应的数据response.data，响应结果中还有以下主要属性：

  • data: 实际响应回来的数据
  • headers : 响应头信息
  • status : 响应状态码
  • statusText : 响应状态信息
3.4 全局配置

在发送请求之前，我们可以对axios请求设置全局配置：

// 超时时间
axios.defaults.timeout = 3000; 
//设置默认地址，配置请求的基准URL地址，在请求时就可以不写这一部分
axios.defaults.baseURL =http://www.baidu.com'; 
// 设置请求头
axios.defaults.headers[ 'mytoken'] = 'helloworld'
3.5 拦截器
  1. 请求拦截器

请求拦截器的作用是在发出请求之前设置一些信息：

axios.interceptors.request.use（function（config）{
     //在请求发出之前进行信息设置
     config.headers.mytoken = 'helloworld'  // 和全局配置设置请求头效果一样，但是更加灵活
     return config;
   },function(error){
     // 处理响应的错误信息
     console.log(error);
   });
  1. 响应拦截器

响应拦截器的作用是在获取数据之前对数据进行一些加工处理：

axios.interceptors.response.use（function（response）{
     //对返回的数据进行处理
      var data = response.data;
      return data; 
   },function(error){
     //处理响应的错误信息
     console.log(error);
   });

4. async / await

async / await方法是ES7中引入的新语法，可以更加便捷的进行异步操作。其中：

  • async关键字用于函数上(async函数的返回值是Promise实例对象)
  • await关键字用于async函数当中(await可以得到异步的结果)
async function queryData (id) {
     const ret = await axios.get('/data'); //可以直接得到调用结果，不需要再使用then  
     return ret;
  }
  // 因为上一步返回的Promise对象，所以通过调用then，可以直接获得上面获取到的数据
  queryData.then (ret=> { 
  console.log (ret)   
})

使用async / await 处理多个异步请求：

对于多个异步请求 ，我们只要在async函数中按照顺序处理异步任务即可：

async function queryData(id) {
    const info = await axios. get('/async1') ;
    const ret = await axios . get ( 'async2?info='+info.data) ;
    return ret;
 }
 queryData.then (ret=>{
 console.log (ret)
 })

这大概就是这些请求方式的简单介绍以及基本使用方法。【完】

CUG-GZ
关注
专栏目录
基于axios封装fetch方法及调用实例
08-28
下面小编就为大家分享一篇基于axios封装fetch方法及调用实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
从ajax到fetch、axios
weixin_33851177的博客
04-11 86
前端是个发展迅速的领域，前端请求自然也发展迅速，从原生的XHR到jquery ajax，再到现在的axios和fetch。 jquery ajax $.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function() {}, error: functi...
干货分享：Axios vs. Fetch API，你该选哪个？
最新发布
前端达人
07-28 630
在前端开发中，与远程服务器无缝互动并通过网络交换数据是必不可少的一环。不论是从API获取数据、执行CRUD操作，还是处理其他网络相关任务，HTTP请求的重要性不言而喻。为了让开发者更轻松地处理HTTP请求，JavaScript社区中诞生了两个非常流行的库：Axios和Fetch。那么，究竟哪个工具更适合你的项目需求呢？今天，我们就来深度解析Axios和Fetch的优缺点，看看它们在不同任务中的表现...
ajax到axios
qq_45706352的博客
05-14 391
简介 异步的 JavaScript 和 XML，最大的优点是无刷新获取数据。 http请求报文格式 HTTP请求报文和响应报文 1.HTTP请求报文由3部分组成（请求行+请求头+请求体） 请求行： ①是请求方法，GET和POST是最常见的HTTP方法，除此以外还包括DELETE、HEAD、OPTIONS、PUT、TRACE。 ②为请求对应的URL地址，它和报文头的Host属性组成完整的请求URL。 ③是协议名称及版本号。 请求头： ④是HTTP的报文头，报文头包含若干个属性，格式为“属性名:属性值”，服务
JS： Axios 和 Fetch
大空翼 つばさ
10-29 738
Axios 基于XMLHttpRequest对象，使用Promise封装，使用时需要导入axios.js。 CDN地址：https://unpkg.com/axios/dist/axios.js，压缩版 https://unpkg.com/axios/dist/axios.min.js Fetch 浏览器原生API，使用Promise封装，在尚未支持ES6语法的浏览器中使用时需要导入es...
fetch和axios的优缺点
weixin_45532305的博客
07-31 3651
fetch与axios fetch fetch 是一个低层次的API，你可以把它考虑成原生的XHR，所以使用起来并不是那么舒服，需要进行封装。多年来，XMLHttpRequest一直是web开发者的亲密助手。无论是直接的，还是间接的， 当我们谈及Ajax技术的时候，通常意思就是基于XMLHttpRequest的Ajax，它是一种能够有效改进页面通信的技术。 Ajax的兴起是由于Google的Gmail所带动的，随后被广泛的应用到众多的Web产品（应用）中，可以认为， 开发者已经默认将XMLHttpRequ
ajax和fetch、axios三者的区别
m0_68359121的博客
06-09 2065
1.Ajax 它的全称是：Asynchronous JavaScript And XML，翻译过来就是“异步的 Javascript 和 XML”。 很多小伙伴可能会误以为 Ajax 是发请求的一种方式，或者把 XMLHttpRequest 与 Ajax 划等号，其实这是错误和片面的。 正解： Ajax 是一个技术统称，是一个概念模型，它囊括了很多技术，并不特指某一技术，它很重要的特性之一就是让页面实现局部刷新。 特点： 局部刷新页面，无需重载整个页面。 简单来说，Ajax 是一种思想，XM
对异步请求xhr、ajax、axios、fetch的区别比较
01-08
本文将对比分析四种常见的异步请求方式：XMLHttpRequest（xhr）、jQuery的$.ajax、axios以及fetch，以便理解它们各自的特点和适用场景。 1. XMLHttpRequest（xhr） XMLHttpRequest对象是最早的异步请求手段，它...
axios 底层是ajax吗,说说axios、ajax、fetch的关系
weixin_36134871的博客
08-05 1209
axios 和 ajax 都是对XMLHttpRequest这个对象的封装；而 fetch 则是window下的一个方法，是一个更底层的方法。ajax其实重点就是首先实例一个XMLHttpRequest对象，用其中的 open 方法建立连接； send 方法传输数据(前端传到后台)；然后再利用 onreadystatechange 监听readyState的变化，当其为 4 时，代表请求完成；实...
01-ajax-fetch-axios-区别.md
03-31
在前端开发领域，面试时常常会考察应聘者对于基础技术的理解程度，其中AJAX、Fetch API和Axios是常考的知识点。首先，我们要明确一点，AJAX不是一个具体的API或者库，而是一个技术概念，它代表了异步的JavaScript和...
ajax、axios、fetch的区别
qq_46015513的博客
09-17 479
（1）AJAX Ajax 即“AsynchronousJavascriptAndXML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。它是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。其缺点如下： 本身是针对MVC编程，不符合前端MVVM的浪潮 .
fetch发起ajax请求
zgh472365411的博客
09-06 393
fetch发送Ajax请求
fetch和axios
hsCBY的博客
09-05 521
1.前后端交互模式 ***原生ajax ***基于jQuery的ajax ***fetch ***axios 2.URL的地址格式 （1）传统地址格式: 协议://域名(或者id地址):端口(默认为80端口，可以省略)/路径?参数#锚点(用来定位页面中的某个位置) 例: http://ithema:80 http://ithema:80/index.html http://ithema:80/in...
fetch与axios
dream_will_true的博客
03-19 302
fetch与axios的定位认识。 fetch是浏览器提供的api, axios是社区封装的一个组件。 fetch是一个低层次的API，你可以把它考虑成原生的XHR， 所以使用起来并不是那么舒 服，需要进行封装。 多年来，当我们谈及 Ajax技术的时候，通常意思就是基于XMLHttpRequest的Ajax，它是一种能够有效改进页面通信的技术。Ajax的兴起是 由于Google的Gmail所带动的，，可以认为，开发者已经默认将XMLHttpRequest作为了当前Web应用与远程资源进行通信的基础。
JS基础 —— fetch 与 ajax
娃哈哈_的博客
11-08 1202
导言 今日别人突然想我提起了fetch,还问了和ajax有何区别。我当时一脸懵，虽然之前看到别人使用过fetch,但没有深入了解。近日研究了一下分享给大家~~ 你所熟悉的ajax 相信大家对ajax的理念和用法，已经非常熟悉了，毕竟这门技术已经1998年前后就得到了应用，已经发展了十几年。在前后端通信领域占据着重要地位！ 核心对象：XMLHTTPRequest 在利用XMLHttpRequest对...
Vue之fetch&axios
weixin_46015333的博客
02-26 2184
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
axios和fetch
kuku30的博客
06-21 259
框架级的数据请求 axios ( 第三方库 — 别人封装好的库 ) fetch ( javascript 原生提供 ) vue这边的数据请求的发展 vue-resource ( Vue 以前自己封装使用的请求类库 ) ，但是 vue-resource作者已经放弃更新了 vue-resource 作者推荐我们使用 axios vue-resource 用法 和 axios 相似度 ...
fetch的用法ajax,如何使用Fetch在JavaScript中进行AJAX调用
weixin_32382353的博客
08-05 177
原标题：如何使用Fetch在JavaScript中进行AJAX调用 在本系列中，我将定期分享有关JavaScript的小知识。我们将介绍JS基础知识，浏览器，DOM，系统设计，域体系结构和框架。Fetch是用于在JavaScript中发出AJAX请求的接口。它由现代浏览器广泛实现，并用于调用API。 调用fetch返回带有响应对象的Promise。如果出现网络错误，则将拒绝访问；如果连接到服务器没...
ajax fetch axios
04-27
综上所述，Fetch和Axios都比传统的AJAX更加简单直观、易于维护，因此已经成为当今最为流行的前端数据请求解决方案之一。但是，在选择具体的技术时，需要根据具体的项目需求和开发经验来做出决策。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CUG-GZ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值