-
axios和fetch
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 个人理解就是用来发送网络请求的，并且支持 ES6 的新特性 promise 。
axios特点：
>
如何引入axios
npm install axio
bower install axios
因为axious是基于promise的，所以用法和promise差不多，也是用函数来使用then方法；利用axious接受的数据是解析了的，并且解析后的数据存储在then中data对象的data属性中。
举例：
先建好文件夹生成package.json文件和node_modules文件夹；创建好网页页面所在的文件夹，做好前期准备工作
index.html文件
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.js">script>
head>
<body>
<h1>axios网络请求工具h1>
<script>
//使用axious函数获取数据，then方法得到解析后的数据
var p1=axios('/ajax1')
p1.then((data)=>{
console.log(111111111,data.data)
return axios('/ajax2')
})
.then((data2)=>{
console.log(data2.data)
return axios('/ajax3')
})
.then((data3)=>{
console.log(data3.data)
return axios('/ajax4')
})
.then((data4)=>{
console.log(data4.data)
})
.catch((e)=>{
console.log(e)
})
index.js
const router =require("./router.js")
router.get("/ajax1",(req,res)=>{
res.end('{"info":"hello1"}')
})
router.get("/ajax2",(req,res)=>{
res.end('{"info":"hello2"}')
})
router.get("/ajax3",(req,res)=>{
res.end('{"info":"hello3"}')
})
router.get("/ajax4",(req,res)=>{
res.end('{"info":"hello4"}')
})
router.js
var fs=require("fs")
var url=require("url")
var querysting=require("querystring")
var mime=require("mime")
let urls={}
var http=require("http")
let router=function(req,res){
//这个函数每次用户访问时运行
let pathname=url.parse(req.url).pathname
fs.readFile(router.basepath+pathname,(err,data)=>{
if(!err){
res.setHeader("content-Type",mime.getType(pathname))
res.end(data)
}else{
if(!urls[pathname]){res.end("404 not found-mymvc")}
else{urls[pathname](req,res)}
}
})
}
router.static=function(path){
this.basepath=path
}
router.get=function(url,cb){
urls[url]=cb
}
router.basepath=__dirname+"/public"
http.createServer(router).listen(8080)
module.exports=router;
代码运行结果：
fetch () 方法用于发起获取资源的请求。 它返回一个 promise，这个 promise 会在请求响应后被 resolve，并传回 Response 对象。
fetch 规范与 jQuery.ajax() 主要有以下的不同：
一个基本的 fetch 请求设置起来很简单。看看下面的代码：
fetch("http://192.168.0.101:8080/ajax3")
.then((res)=>{
return res.json()
})
.then((data)=>{
console.log(data)
})
这里我们通过网络获取一个 JSON 文件并将其打印到控制台。最简单的用法是只提供一个参数用来指明想 fetch() 到的资源路径，然后返回一个包含响应结果的 promise（一个 Response 对象）。
当然它只是一个 HTTP 响应，而不是真的 JSON。为了获取 JSON 的内容，我们需要使用 json() 方法（该方法返回一个将响应 body 解析成 JSON 的 promise）。
- 当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject，即使响应的 HTTP 状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve（如果响应的 HTTP 状态码不在 200 - 299 的范围内，则设置 resolve 返回值的 ok 属性为 false），仅当网络故障时或请求被阻止时，才会标记为 reject。
- fetch 不会发送跨域 cookie，除非你使用了 credentials 的初始化选项。
- 还可以使用CDN来进行引入到页面中去
- 也可以使用 bower进行安装，然后在页面中进行引入:
- 可以通过npm安装来进行使用
- 批量发送多个请求
- 浏览器端、node 端都可以使用
- 支持请求、响应拦截器
- 支持请求取消
- 请求、响应数据转换
- 基本 promise 的异步 ajax 请求库
-
相关阅读:
JavaFx之使用高版本JDK（二十八）
SHT31/85温湿度传感器驱动代码(基于GD32F103)
centos7下docker设置新的下载镜像源并调整存放docker下载镜像的仓库位置
【C++ • STL • 力扣】详解string相关OJ
深度学习学习笔记-模型的修改和CRUD
Java中的继承是什么?
MMU如何通过虚拟地址找到物理地址?
基于51单片机的舞蹈机器人四路步进电机控制仿真
贷款行业怎么获取高效精准客户
10月17日，每日信息差
- 原文地址：https://blog.csdn.net/cjx177187/article/details/126140981