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

我不是女神ヾ 2024-03-16 09:26 9阅读 0赞

## axios ##

### GET请求 ###

前端

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请求 ###

前端

axios.delete('/delete.do', {
        params: {
        id: value}})
        .then((response) => {
        
        //TODO
    })

后端

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

### PUT请求 ###

前端

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'))