axios
介绍:
Axios,是一个基于promise [5] 的网络请求库,作用于node.js和浏览器中,它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。
特点:
从浏览器创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF
使用axios需要先从网上获取它的地址信息;以字节跳动静态资源公共库为例,进入页面之后,直接搜索axios,然后找到目标版本,然后复制axios.js的地址
之后将地址通过script标签引入html文件中,使用代码如下:
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.js"></script>
<button onclick="fn()">axios-ajax</button>
<script>
function fn() {
var url = "http://192.168.0.114:8081/ajax1"
axios(url).then((res) => {
console.log(res);
})
}
</script>
index.js文件的代码为:
var router = require("./router.js")
router.get("/ajax1",function(req,res) {
res.end('{"name":"xiaozhang","age":21}')
})
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(8081)
module.exports=router;
结果为:
fetch
fetch 是 XMLHttpRequest 的升级版,使用js脚本发出网络请求,但是与 XMLHttpRequest 不同的是,fetch 方式使用 Promise,相比 XMLHttpRequest 更加简洁。
fetch是浏览提供的功能,因此不需要单独引入模块。
fetch的使用代码如下:
<button onclick="fn()">axios-ajax</button>
<script>
function fn() {
var url = "http://192.168.0.114:8081/ajax1"
fetch(url).then((data) => {
return data.json()
})
.then((result) => {
console.log(result);
})
}
</script>
结果: