axios 的简化写法

1. async - await 关键字

说明：
- ES6后推出的新的代码规范，目的是简化现有axios，ajax请求的代码结构。提高用户的开发效率。
- async用来标识函数
- await用来标识请求
- 改用法只能用在Ajax请求中
- async - await 是axios为了简化then()的一种全新的语法

2. 入门案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>axios的简化操作</title></head><body><h1>简化操作的语法</h1><script src="../js/axios.js"></script><script>//1.定义请求的前缀axios.defaults.baseURL = "http://localhost:8080/vue"//2.axios查询调用/*axios.get("/findAll").then(promise => {console.log(promise.data)})*///3.简化写法 async - await 关键字// 定义函数async function findAll(){// let promise = await axios.get("/findAll")// console.log(promise)// console.log(promise.data)// console.log(promise.status)//解构赋值操作let {data: result,status: status} = await axios.get("/findAll")console.log(result)console.log(status)}//4.调用函数findAll()</script></body>
</html>

3. vue对象中的写法

以更新为例

    //定义axios请求的前缀axios.defaults.baseURL = "http://localhost:8080/vue"const app = new Vue({el:"#app",data() {return {// 定义用户数据userList: [],//封装修改的数据updateUser: {id: '',name: '',age: '',sex: ''}}},methods:{//实现数据的更新操作updateUserMet(){axios.put("/updateUser",this.updateUser).then(promise => {//提示信息alert(promise.data)//刷新列表this.getUserList()//清空修改数据this.updateUser = {}})},// 简化写法async updateUserMet2(){let {data: result} = await axios.put("/updateUser",this.updateUser)alert(result)this.updateUser = {}this.getUserList()}},})

axios 的简化写法相关推荐

java中for循环的简化_Java中for语句的简化写法
Java当中的for语句是可以进行简化的,但是简化有一定的条件: 简化后的写法: for(数据类型表示符 : 表达式){....} 根据"表达式"类型,总共就有两种类型的表达 ...
理解 Delphi 的类(十) - 深入方法[4] - 共同类型的参数的简化写法
//要点4: 多个相同类型的参数可以简化写法 function MyFun(str: string; x,y,z: Integer): string; beginResult := str + Int ...
ES6新特性_ES6对象的简化写法---JavaScript_ECMAScript_ES6-ES11新特性工作笔记008
然后我们再看一下,对象的简化写法可以看到我们先声明,一个name,一个change方法然后以前我们声明const变量,然后需要上面这样写 name:name change:change 现在不用了 ...
vue的axios两种写法（不知道对不对，仅供参考）
vue的axios两种写法(不知道对不对,仅供参考) `methods () { getHomeInfo () { axios.get ('/api/index.json') ...
FPGA开发技巧备忘录——大量相同类型IP核仿真时tcl简化写法
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 FPGA开发技巧备忘录--大量相同类型IP核仿真时tcl简化写法前言通配符* 前言之前在<modelsim独立仿真quar ...
Vuex的使用（四）——mapState的简化写法
参考文档:https://vuex.vuejs.org/zh/guide/ 按上一章的说明,可以在mapState的参数对象里定义多个属性来批量声明state,如果不需要对state进行额外处理的话, ...
Java for 语句简化写法_Java 8 Lambda 写法与简化
Java 8 的 Lambda 表达式的实现方式还是基于已有的字节码指令,由 Lambda 表达式的方法签名结合上下文并经由 SAM 推断出正确的类型来.Java 8 的 Lambda 完整书写格式是 ...
Spring Set注入简化写法1
基于属性的简化 JDK 类型注入: <property name="id"><value>10</value> </property> ...
提高Objective-C代码质量心机一:简化写法
提高OC代码质量的小心机一.OC特性 OC 为 C 语言添加了面向对象特性,是其超集; OC 使用动态绑定的消息结构,也就是,在运行时才会检查对象类型; 接收一条消息后,究竟应执行何种代码,由运行期 ...
Python选择结构中多条件测试的简化写法
问题描述:输入一个包含若干整数的列表,如果列表中所有数字都大于5就输出字符串ALL,如果有多于一半数字大于5就输出字符串HALF,如果所有数字都不大于5就输出字符串NO. 再读一遍上面的题目,然后自己 ...

axios 的简化写法

axios 的简化写法

axios 的简化写法

1. async - await 关键字

2. 入门案例

3. vue对象中的写法

axios 的简化写法相关推荐

最新文章

热门文章