Axios基本语法和前后端交互

Axios是一个js框架,用于发送ajax请求。

一、导入

// node中,使用npm安装

npm install axios

// HTML中,使用cdn安装

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

二、基本使用

javascript 复制代码
// 使用axios为给定ID的user创建请求
// 请求成功,执行.then()中的内容,请求失败,执行.catch()中的内容
// res 、 err 为回调函数

axios.get('/user?ID=12345')
    .then(function(response){
        console.log(response);
    })
    .catch(function(error)){
        console.log(error);
    });

// 开发时的写法

axios.get()
.then( res =>{} )
.catch( err =>{} )
javascript 复制代码
// 基本使用

axios.get('接口')
    // res:是axios库对响应数据做的一层包装
.then(res => {
    // 内容
})
    //不是业务逻辑出错,而是网络出错:1、url错误  2、网络错误
.catch(err  => {
    // 内容
})
    // 本次请求完成,无论是否成功执行,都会执行此条内容
.then( ()=>{
    // 内容
} )

三、axios发送get和post

javascript 复制代码
// get请求
axios.get(url:'')
.then( res =>{
    // 内容
})
.catch( error =>{
    // 内容
})

// post请求
axios.post(url:'',{ // 参数列表 })
.then( res =>{} )
.catch( err => {} )

常用语法:

javascript 复制代码
// 通过向axios传递响应的配置创建请求

axios({
    method:'get/post',
    url:''
    // post发送请求,参数使用data进行传递
    data:{},
    // get发送请求,参数使用params进行传递
    params:{}
}).then( res=>{} ).catch()

四、链式语法

1、链式语法:对象可以连续调用

axios.get().then().catch()

相关推荐
千汇数据的老司机7 小时前
新能源行业B端极简设计:碳中和目标下的交互轻量化实践
交互·管理系统
大美B端工场-B端系统美颜师10 小时前
跨境协作系统文化适配:多语言环境下的业务符号隐喻与交互习惯
交互·跨境写作
暴躁茹16 小时前
Windows 系统分辨率切换** 与 **Qt4 无边框窗口管理机制** 的交互
windows·交互
小乖兽技术19 小时前
C#与C++交互开发系列(二十六):构建跨语言共享缓存,实现键值对读写与数据同步(实践方案)
c++·c#·交互
JosieBook1 天前
【web应用】基于Vue3和Spring Boot的课程管理前后端数据交互过程
前端·spring boot·交互
程序员编程指南2 天前
Qt 与 WebService 交互开发
c语言·开发语言·c++·qt·交互
小乖兽技术2 天前
C#与C++交互开发系列(二十四):WinForms 应用中嵌入C++ 原生窗体
c++·c#·交互
henreash3 天前
NLua和C#交互
开发语言·c#·交互
哥本哈士奇3 天前
Web前端交互利用Python跟大模型操作
前端·python·交互
天若有情6733 天前
从一个“诡异“的C++程序理解状态机、防抖与系统交互
开发语言·c++·交互·面向对象·状态机