axios

GET请求

前端

<!--params是关键字，说明所携带的参数,json格式参数--> axios.get('/edit.do', {params: {id: value}}).then((response) => {//TODO})

后端

@GetMapping("/edit")public Result edit(Integer id){//TODO}

POST请求

Content-Type: application/json

import axios from 'axios'let data = {"code":"1234","name":"yyyy"};axios.post(`${this.$url}/test/testRequest`,data).then(res=>{console.log('res=>',res); })

Content-Type: multipart/form-data

import axios from 'axios'let data = new FormData();data.append('code','1234');data.append('name','yyyy');axios.post(`${this.$url}/test/testRequest`,data).then(res=>{console.log('res=>',res); })

Content-Type: application/x-www-form-urlencoded

import axios from 'axios'import qs from 'Qs'let data = {"code":"1234","name":"yyyy"};axios.post(`${this.$url}/test/testRequest`,qs.stringify({data})).then(res=>{console.log('res=>',res); })

DELETE请求

前端

<!--DELETE请求第二个参数，可携带多个json格式的参数，但需要params作为json参数的关键字-->axios.delete('/delete.do', {params: {id: value}}).then((response) => {//TODO})

后端

@DeleteMapping("/delete")public Result delete(Integer id){//TODO}

PUT请求

前端

<!--PUT请求第二个参数，可直接携带json格式的参数-->axios.put('/update.do', {name:userName,age:userAge,address:userAddress}).then((response) => {//TODO})

后端

public class User implements Serializable {private String name;private Integer age;private String address;}@PutMapping("/update")public Result update(@RequestBody User user){//TODO}

同步请求

asyns/await 将 axios 异步请求同步化

export default {name: 'Historys',data() {return {totalData: 0, tableData: []}},created () {this.getHistoryData()},methods: {handleClick (tab) {let data = {status: tab.name,name: this.formInline.user,cid: this.formInline.identity,start_time: this.formInline.dateTime ? this.formInline.dateTime[0] : '',end_time: this.formInline.dateTime ? this.formInline.dateTime[1] : ''}this.getHistoryData()},// 统一处理axios请求async getHistoryData (data) {try {let res = await axios.get('/api/survey/list/', {params: data})this.tableData = res.data.resultthis.totalData = res.data.count} catch (err) {console.log(err)alert('请求出错！')}}}}

当 axios 请求拿到的数据在不同场景下做不同的处理时

export default {name: 'Historys',data() {return {totalData: 0, tableData: []}},async created () {try {let res = await this.getHistoryData()console.log(res)// 等拿到返回数据res后再进行处理this.tableData = res.data.resultthis.totalData = res.data.count} catch (err) {console.log(err)alert('请求出错')} },methods: {async handleClick (tab) {let data = {status: tab.name,name: this.formInline.user,cid: this.formInline.identity,start_time: this.formInline.dateTime ? this.formInline.dateTime[0] : '',end_time: this.formInline.dateTime ? this.formInline.dateTime[1] : ''}try {let res = await this.getHistoryData()console.log(res)// 等拿到返回数据res后再进行处理this.tableData = res.data.resultthis.totalData = res.data.count} catch (err) {console.log(err)alert('请求出错')} },// 封装axios请求，返回promise, 用于调用getHistoryData函数后作不同处理getHistoryData (data) {return new Promise((resolve, reject) => {axios.get('/api/survey/list/', {params: data}).then((res) => {resolve(res)}).catch((err) => {reject(err)})})}}}

Promise

概述

Promise有三种状态：这三种状态不受外界影响，而且状态只能从pending改变为resolved或者rejected，并且不可逆

pending: 等待中，或者进行中，表示还没有得到结果resolved: 已经完成，表示得到了我们想要的结果，可以继续往下执行rejected: 也表示得到结果，但是由于结果并非我们所愿，因此拒绝执(用catch捕获异常)

var promise = new Promise((resolve,reject)=>{let url1= ''this.axios.get(url,{}).then((res)=>{resolve(res);}).catch((err)=>{console.log(err)})});

不管是then或者catch返回的都是一个新的Promise实例！而每个Primise实例都有最原始的Pending（进行中）到Resolve（已完成），或者Pending（进行中）到Reject（已失败）的过程

基本用法

Promise.all()

var p = Promise.all([p1, p2, p3]);

说明：

p1,p2,p3都是Promise的实例对象p要变成Resolved状态需要p1，p2，p3状态都是Resolved，如果p1,p2,p3至少有一个状态是Rejected，p就会变成Rejected状态

Promise.race()

var p = new Promise( [p1,p2,p3] )

说明：

只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变率先改变的 Promise 实例的返回值，就传递给p的回调函数,p的状态就会改变Resolved状态

Promise resolve()

Promise.resolve('foo')// 等价于new Promise(resolve => resolve('foo'))

Promise reject()

Promise.reject('foo')// 等价于new Promise(reject => reject('foo'))