Axios基本使用,为学习后续的Vue服务【发送请求+并发请求+前端拦截器】

目录

1、项目中引入Axios

2、使用Axios发送请求

2.1、例:发送GET请求

2.2、例:发送POST请求

3、axios并发请求

4、拦截器


1、项目中引入Axios

复制代码
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

注:个人学习笔记,因自己学过后端,所以有关后端的代码,我在这里就不展示了~

不了解后端的宝子,也不会耽误学习,因为公司里会有写好的接口文档,直接使用就可以了

2、使用Axios发送请求

2.1、例:发送GET请求

javascript 复制代码
axios.get("http://localhost:8080/user?id=1").then(function(res) {
        console.log(res);
    }).catch(function(error){
        console.log(error);
    });
    // es6中简化写法:lambada表达式
    axios.get("http://localhost:8080/user?id=2").then((res)=> {
        console.log(res);
    }).catch((error)=> {
        console.log(error);
    });

格式其实还是挺简单的~

2.2、例:发送POST请求

javascript 复制代码
axios.post("http://localhost:8080/user",{
        name:"xxx",
        age:10
   }).then((res)=> {
        console.log(res);
    }).catch((error)=> {
        console.log(error);
    });

3、axios并发请求

并发请求:将多个请求在同一时刻发送到后端服务接口,最后在集中处理每个请求的响应结果

代码:

javascript 复制代码
function test1() {
        return axios.get("http://localhost:8080/user?id=3");
    }
    function test2() {
        return axios.get("http://localhost:8080/user?id=4");
    }
    axios.all([test1(),test2()]).then(
        axios.spread((res_test1,res_test2)=> {
            console.log(res_test1);
            console.log(res_test2);
        })
    );

4、拦截器

  • 作用:用来将axios中共有参数,响应公共处理交给拦截处理,减少axios发送请求时代码冗余
  • 类型:请求拦截器;响应拦截器

使用:

javascript 复制代码
 //创建axios的配置对象
    var instance = axios.create({
        baseURL:"http://localhost:8080/",
        timeout:5000
    });
    //请求拦截器
    instance.interceptors.request.use(function(config) {
        config.url += "?token=1111"
        return config;
    });
    //响应拦截器
    instance.interceptors.response.use(function(response) {
        if(response.status == 500) {
            alert("服务器内部故障");
        }
        return response
    });

好啦,以上就是简单的学习,简单了解一下,axios的强大之处~

后面周末会做一个简单小项目练练手,到时候再和大家分享分享~

相关推荐
2501_916008891 小时前
Web 前端开发常用工具推荐与团队实践分享
android·前端·ios·小程序·uni-app·iphone·webview
SkylerHu1 小时前
前端代码规范:husky+ lint-staged+pre-commit
前端·代码规范
菜鸟una2 小时前
【微信小程序 + 消息订阅 + 授权】 微信小程序实现消息订阅流程介绍,代码示例(仅前端)
前端·vue.js·微信小程序·小程序·typescript·taro·1024程序员节
Yeats_Liao2 小时前
Go Web 编程快速入门 05 - 表单处理:urlencoded 与 multipart
前端·golang·iphone
飞翔的佩奇2 小时前
【完整源码+数据集+部署教程】【运动的&足球】足球场地区域图像分割系统源码&数据集全套:改进yolo11-RFAConv
前端·python·yolo·计算机视觉·数据集·yolo11·足球场地区域图像分割系统
拉不动的猪2 小时前
h5后台切换检测利用visibilitychange的缺点分析
前端·javascript·面试
桃子不吃李子2 小时前
nextTick的使用
前端·javascript·vue.js
萌新小码农‍2 小时前
SpringBoot+alibaba的easyexcel实现前端使用excel表格批量插入
前端·spring boot·excel
报错小能手2 小时前
项目——基于C/S架构的预约系统平台 (1)
开发语言·c++·笔记·学习·架构
冰暮流星3 小时前
css3新增背景图片样式
前端·css·css3