【Axios篇】教你使用Axios颠覆你对Ajax的认知

碰磕
167 阅读2分钟

介绍

🌼Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

官网:www.axios-http.cn/docs/intro

与Ajax对比

如果把Ajax比作汽车🚗,Axios就可以称之为飞机✈

简单来说,ajax有的Axios有,ajax没有的Axios也有~

使用

语法:

 axios.请求方式(请求路径,传递参数).then(function(ret){
     	//ret为返回回来的数据
     );
    })

记得安装引入Axios

<script src="./js/axios.js"></script>

在此之前,先将所有要用的路由准备好:(后端)

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

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

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

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

    //server发json给html
    app.get("/json",(req,res)=>{
        console.log(`请求头:${req.headers.token}`);
        res.json({
            "name":"碰磕",
            "age":19
        });
    })

GET请求带参

关键词:params

//get请求带参
    let url1="http://localhost:3000/task3";
    axios.get(url1,{
        params:{userid:4567,uname:'碰磕'}
    }).then(function(ret){
        console.log(ret);  //返回的是个obj
        console.log(`
        返回的数据--->${ret.data}
        状态码---->${ret.status}
        状态信息---->${ret.statusText}
        `);
    })

返回值:在这里插入图片描述 可以看到返回的是obj，所以要得到数据得.data 最终打印: 在这里插入图片描述

POST请求带参

//post 
    let url3="http://localhost:3000/task4";
    var content={
        uname:'碰磕'
    }
    axios.post(url3,content).then(function(ret){
        console.log(ret);  //返回的是个obj
        console.log(`
        返回的数据--->${ret.data}
        状态码---->${ret.status}
        状态信息---->${ret.statusText}
        `);
    })

在这里插入图片描述 返回成功

DELETE 路径参数

let url2="http://localhost:3000/task4/3738";
    axios.delete(url2).then(function(ret){
        console.log(ret);  //返回的是个obj
        console.log(`
        返回的数据--->${ret.data}
        状态码---->${ret.status}
        状态信息---->${ret.statusText}
        `);
    })

在这里插入图片描述 返回成功

PUT请求

//put
    let url4="http://localhost:3000/task4/3738";
    axios.put(url4,{name:'小朋友'}).then(function(ret){
        console.log(ret);  //返回的是个obj
        console.log(`
        返回的数据--->${ret.data}
        状态码---->${ret.status}
        状态信息---->${ret.statusText}
        `);
    })

在这里插入图片描述 返回成功

接收json数据

不需要转换格式

	let url5="http://localhost:3000/json";
    axios.get(url5).then(function(ret){
        console.log(ret);  //返回的是个obj
        //不需要转换格式....
        console.log(`
        返回的数据--->${ret.data.name}--->${ret.data.age}
        状态码---->${ret.status}
        状态信息---->${ret.statusText}
        `);
    })

在这里插入图片描述

返回成功--->方便快捷

优化

配置基准url地址

axios.defaults.baseURL=‘基准url地址’

示例:

axios.defaults.baseURL='http://localhost:3000';
 axios.get('json').then(function(ret){
        console.log(ret);  //返回的是个obj
        //不需要转换格式....
        console.log(`
        返回的数据--->${ret.data.name}--->${ret.data.age}
        状态码---->${ret.status}
        状态信息---->${ret.statusText}
        `);
    })

这样路径只需要写json即可请求到数据

配置请求头信息

可配置token进行验证机制

示例

//配置请求头信息    加个token身份信息
    axios.defaults.headers['token']='jwtcode3738';
    axios.get('json').then(function(ret){
        console.log(ret);  //返回的是个obj
        //不需要转换格式....
        console.log(`
        返回的数据--->${ret.data.name}--->${ret.data.age}
        状态码---->${ret.status}
        状态信息---->${ret.statusText}
        `);
    })

这样后端就可得到token值,并且进行相应的验证判断操作!!! 在这里插入图片描述

Axios拦截器

  • 请求拦截器(request)
  • 响应拦截器(response)

测试前准备好请求

axios.get('http://localhost:3000/json').then(data=>{
        console.log(data);
    })

请求拦截器

语法

//请求拦截器
    axios.interceptors.request.use(成功回调函数,失败回调函数)

示例

//请求拦截器
    axios.interceptors.request.use(config=>{
        console.log(`进入拦截器`,config);
        config.headers.token='jwt77777';    //每个请求的请求头都添加token
        //放行
        return config;
    },err=>{
        console.log(err);
    })

return config代表放行 在这里插入图片描述 说明请求拦截器起作用了,发送请求前会执行拦截

响应拦截器

语法

//响应拦截器
    axios.interceptors.response.use(成功回调函数,失败回调函数)

示例

即返回数据回来时会进行拦截(可进行对返回数据的修改)

 //响应拦截器
    axios.interceptors.response.use(res=>{
        var data=res.data;
        console.log(`数据=`,data);  //可修改响应来的数据
        return data;
    },err=>{
        console.log(err);
    })

此处将返回回来的对象改为返回对象内的数据 在这里插入图片描述 成功拦截并且对返回的数据进行了更改

axios 配合 await进行请求数据

对于不了解await的可参考我的另一篇文章:blog.csdn.net/m_xiaozhile…

最终优化版本

axios.defaults.baseURL='http://localhost:3000';
    async function test(){
        let ret=await axios.get('json');
        console.log(ret);
    }
    test();

就是这么简便~完结😄

avatar
文章
阅读
粉丝