axios 和 fetch

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文件中，使用代码如下：

 
    
 
    <button onclick="fn()">axios-ajaxbutton>
 
    <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的使用代码如下：

"fn()">axios-ajax
    <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>

结果：