基本用法

返回值为response对象 学习此api前请先了解promise---》我的另一篇文章:blog.csdn.net/m_xiaozhile…

关键词:fetch

使用

使用前请先搭建好后端:nodejs用于ajax请求数据 可以参考我的另一篇搭建nodejs文章:blog.csdn.net/m_xiaozhile…

后端主要路由:

//路由
    app.get('/task1',(req,res)=>{
        res.send("task1 Success");
    })

	let url="http://127.0.0.1:3000/task1";
    fetch(url).then(ret=>{
            // console.log(ret);   //ret不是数据,而是response对象
            return ret.text();
    }).then(function(data){
        console.log("数据--->:"+data);
    })

最终能得到返回过来的数据"task1 Success"

带参使用

传递数据给后端

GET

//路由
app.get("/task3",(req,res)=>{
        let userid=req.query.userid;
        res.send("get传递的参数"+userid);
    })

//GET
    let url1="http://127.0.0.1:3000/task3?userid=10001";
    fetch(url1,{method:"GET"}).then(ret=>{
            // console.log(ret);   //ret不是数据,而是response对象
            return ret.text();
    }).then(function(data){
        console.log("数据--->:"+data);
    })

成功返回得到自己传过去的数据.....

POST

app.post("/task4",(req,res)=>{
        let uname=req.body.uname;
        res.send("post传递的参数"+uname);
    })

let url2="http://127.0.0.1:3000/task4";
    fetch(url2,{
        method:"POST",
        body:'uname=碰磕',
        headers:{
            'Content-Type':'application/x-www-form-urlencoded'
        }
    }).then(ret=>{
            // console.log(ret);   //ret不是数据,而是response对象
            return ret.text();
    }).then(function(data){
        console.log("数据--->:"+data);
    })

Resful请求

此处示例delete、put,

DELETE

app.delete("/task4/:id",(req,res)=>{
        let id=req.params.id;
        res.send("DELITE传递的参数"+id);
    })

//Resful(delete)
    let url3="http://127.0.0.1:3000/task4/b1323";
    fetch(url3,{
        method:"delete",
    }).then(ret=>{
            // console.log(ret);   //ret不是数据,而是response对象
            return ret.text();
    }).then(function(data){
        console.log("数据--->:"+data);
    });

成功得到传递过去的数据

PUT

此处传json数据

app.put("/task4/:id",(req,res)=>{
        res.send("put传递的参数"+req.params.id+req.body.name);
    })

//PUT json数据
    let json1={"name":"碰磕",age:18};
    let url4="http://127.0.0.1:3000/task4/001";
    fetch(url4,{
        method:"put",
        body: JSON.stringify(json1),
        headers:{
            'Content-Type':'application/json'
        }
    }).then(ret=>{
            // console.log(ret);   //ret不是数据,而是response对象
            return ret.text();
    }).then(function(data){
        console.log("数据--->:"+data);
    });

---

互传JSON数据

server发json给html

app.get("/json",(req,res)=>{
        res.json({
            "name":"碰磕",
            "age":19
        });
    })

收:

//收json数据
    let jsonurl="http://localhost:3000/json";
    fetch(jsonurl).then(function(ret){
        return ret.text();
    }).then(function(data){
        console.log(data);
        let obj=JSON.parse(data);//转json
        console.log(`姓名:${obj.name},年龄:${obj.age}`)
    })

以上所有代码对Fetch Api的练习完结~ 忘了可用于复制、粘贴----节省时间😄