vue + axios + promise：进行接口请求。post请求提交数据的三种方式

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.result
        this.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.result
      this.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.result
        this.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，并且不可逆

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

var promise = new Promise((resolve,reject)=>{
    let url1= 'https://www.baidu.com'
    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]);

说明：

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

Promise.race()

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

说明：

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

Promise resolve()

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

Promise reject()

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