axios 和 fetch

最新推荐文章于 2024-06-13 07:54:07 发布

z_小张同学

最新推荐文章于 2024-06-13 07:54:07 发布

阅读量159

点赞数 1

分类专栏： node.js 文章标签： node.js ajax 前端

本文链接：https://blog.csdn.net/z_2532040197/article/details/126149219

版权

node.js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

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>

结果：