React05---异步请求ajax

最新推荐文章于 2020-10-18 17:54:01 发布

Lion Of WU

最新推荐文章于 2020-10-18 17:54:01 发布

阅读量246

点赞数

分类专栏： React--尚硅谷

本文链接：https://blog.youkuaiyun.com/NDSoumig/article/details/103750741

版权

React--尚硅谷专栏收录该内容

11 篇文章

订阅专栏

本文对比分析了Axios和Fetch两种流行的HTTP客户端库。Axios因其轻量级、支持Promise和兼容性好而受到推荐，适用于浏览器和Node.js环境。Fetch作为原生API，虽在新版本浏览器中表现良好，但在旧版浏览器中需引入兼容库。文章详细介绍了GET和POST请求的使用方法，展示了Promise如何简化异步操作，避免回调地狱。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery: 比较重, 如果需要另外引入不建议使用
axios: 轻量级, 建议使用
a. 封装XmlHttpRequest对象的ajax
b. promise风格
c. 可以用在浏览器端和node服务器端
fetch: 原生函数, 但老版本浏览器不支持
a. 不再使用XmlHttpRequest对象提交ajax请求
b. 为了兼容低版本的浏览器, 可以引入兼容库fetch.js

GET:

axios.get('/user?ID=12345')
  .then(function (response) {
   		 console.log(response);
  })
  .catch(function (error) {
		    console.log(error);
  });

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
   		 console.log(response);
  })
  .catch(function (error) {
    	console.log(error);
  });

POST:

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

FETCH：

fetch(url).then(function(response) {
  return response.json()
}).then(function(data) {
  console.log(data)
}).catch(function(e) {
  console.log(e)
});

fetch(url, {
  method: "POST",
  body: JSON.stringify(data),
}).then(function(data) {
  console.log(data)
}).catch(function(e) {
  console.log(e)
})

所谓Promise，字面上可以理解为“承诺”，就是说A调用B，B返回一个“承诺”给A，然后A就可以在写计划的时候这么写：当B返回结果给我的时候，A执行方案S1，反之如果B因为什么原因没有给到A想要的结果，那么A执行应急方案S2，这样一来，所有的潜在风险都在A的可控范围之内了。

Promise规范如下：
能够很明显的看出来代码的简洁性和易读性的提升。
一个promise可能有三种状态：等待（pending）、已完成（fulfilled）、已拒绝（rejected）
一个promise的状态只可能从“等待”转到“完成”态或者“拒绝”态，不能逆向转换，同时“完成”态和“拒绝”态不能相互转换
promise必须实现then方法（可以说，then就是promise的核心），而且then必须返回一个promise，同一个promise的then可以调用多次，并且回调的执行顺序跟它们被定义时的顺序一致
then方法接受两个参数，第一个参数是成功时的回调，在promise由“等待”态转换到“完成”态时调用，另一个是失败时的回调，在promise由“等待”态转换到“拒绝”态时调用。同时，then可以接受另一个promise传入，也接受一个“类then”的对象或方法，即thenable对象。

回调地狱和promise的详解：https://blog.youkuaiyun.com/weixin_43739375/article/details/88698670