axios和fetch

最新推荐文章于 2024-01-07 12:14:33 发布

cjx177187

最新推荐文章于 2024-01-07 12:14:33 发布

阅读量396

点赞数

分类专栏：全栈---网络技术文章标签： servlet 前端 javascript

本文链接：https://blog.csdn.net/cjx177187/article/details/126140981

版权

全栈---网络技术专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。个人理解就是用来发送网络请求的，并且支持 ES6 的新特性 promise 。

axios特点：

如何引入axios

npm install axio

bower install axios

<scriptsrc="https://unpkg.com/axios/dist/axios.min.js"></script>

因为axious是基于promise的，所以用法和promise差不多，也是用函数来使用then方法；利用axious接受的数据是解析了的，并且解析后的数据存储在then中data对象的data属性中。

举例：

先建好文件夹生成package.json文件和node_modules文件夹；创建好网页页面所在的文件夹，做好前期准备工作

index.html文件

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>axios网络请求工具</h1>

//使用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 请求库

cjx177187

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
axios和fetch

相反，它会将 Promise 状态标记为 resolve（如果响应的 HTTP 状态码不在 200 - 299 的范围内，则设置 resolve 返回值的。利用axious接受的数据是解析了的，并且解析后的数据存储在then中data对象的data属性中。最简单的用法是只提供一个参数用来指明想 fetch() 到的资源路径，然后返回一个包含响应结果的 promise（一个。当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise。一个基本的 fetch 请求设置起来很简单。..
复制链接

扫一扫