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

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

axios

GET请求

前端

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

后端

  1. @GetMapping("/edit")
  2. public Result edit(Integer id){
  4.     //TODO
  5. }

POST请求

Content-Type: application/json

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

Content-Type: multipart/form-data

  1. import axios from 'axios'
  2. let data = new FormData();
  3. data.append('code','1234');
  4. data.append('name','yyyy');
  5. axios.post(`${
  6.       this.$url}/test/testRequest`,data)
  7. .then(res=>{
  9.     console.log('res=>',res);            
  10. })

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

  1. import axios from 'axios'
  2. import qs from 'Qs'
  3. let data = {
  4.     "code":"1234","name":"yyyy"};
  5. axios.post(`${
  6.       this.$url}/test/testRequest`,qs.stringify({
  8.     data
  9. }))
  10. .then(res=>{
  12.     console.log('res=>',res);            
  13. })

DELETE请求

前端

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

后端

  1. @DeleteMapping("/delete")
  2. public Result delete(Integer id){
  4.     //TODO
  5. }

PUT请求

前端

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

后端

  1. public class User implements Serializable {
  3.     private String name;
  4.     private Integer age;
  5.     private String address;
  6. }
  8. @PutMapping("/update")
  9. public Result update(@RequestBody User user){
  11.     //TODO
  12. }

同步请求

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

  1. export default {
  3.   name: 'Historys',
  4.   data() {
  6.     return {
  8.       totalData: 0,  
  9.       tableData: []
  10.     }
  11.   },
  12.   created () {
  14.     this.getHistoryData()
  15.   },
  16.   methods: {
  18.     handleClick (tab) {
  20.       let data = {
  22.         status: tab.name,
  23.         name: this.formInline.user,
  24.         cid: this.formInline.identity,
  25.         start_time: this.formInline.dateTime ? this.formInline.dateTime[0] : '',
  26.         end_time: this.formInline.dateTime ? this.formInline.dateTime[1] : ''
  27.       }
  28.       this.getHistoryData()
  29.     },
  30.     // 统一处理axios请求
  31.     async getHistoryData (data) {
  33.       try {
  35.         let res = await axios.get('/api/survey/list/', {
  37.           params: data
  38.         })
  39.         this.tableData = res.data.result
  40.         this.totalData = res.data.count
  41.       } catch (err) {
  43.         console.log(err)
  44.         alert('请求出错！')
  45.       }
  46.     }
  47.   }
  48. }

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

  1. export default {
  3.   name: 'Historys',
  4.   data() {
  6.     return {
  8.       totalData: 0,  
  9.       tableData: []
  10.     }
  11.   },
  12.   async created () {
  14.     try {
  16.       let res = await this.getHistoryData()
  17.       console.log(res)
  18.       // 等拿到返回数据res后再进行处理
  19.       this.tableData = res.data.result
  20.       this.totalData = res.data.count
  21.     } catch (err) {
  23.       console.log(err)
  24.       alert('请求出错')
  25.     } 
  26.   },
  27.   methods: {
  29.     async handleClick (tab) {
  31.       let data = {
  33.         status: tab.name,
  34.         name: this.formInline.user,
  35.         cid: this.formInline.identity,
  36.         start_time: this.formInline.dateTime ? this.formInline.dateTime[0] : '',
  37.         end_time: this.formInline.dateTime ? this.formInline.dateTime[1] : ''
  38.       }
  39.       try {
  41.         let res = await this.getHistoryData()
  42.         console.log(res)
  43.         // 等拿到返回数据res后再进行处理
  44.         this.tableData = res.data.result
  45.         this.totalData = res.data.count
  46.       } catch (err) {
  48.         console.log(err)
  49.         alert('请求出错')
  50.       } 
  51.     },
  52.     // 封装axios请求，返回promise, 用于调用getHistoryData函数后作不同处理
  53.     getHistoryData (data) {
  55.       return new Promise((resolve, reject) => {
  57.         axios.get('/api/survey/list/', {
  59.           params: data
  60.         }).then((res) => {
  62.           resolve(res)
  63.         }).catch((err) => {
  65.           reject(err)
  66.         })
  67.       })
  68.     }
  69.   }
  70. }

Promise

概述

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

  1. pending: 等待中，或者进行中，表示还没有得到结果
  2. resolved: 已经完成，表示得到了我们想要的结果，可以继续往下执行

  3. rejected: 也表示得到结果，但是由于结果并非我们所愿，因此拒绝执(用catch捕获异常)

    var promise = new Promise((resolve,reject)=>{

    1. let url1= 'https://www.baidu.com'
    2. this.axios.get(url,{
    3. })
    4. .then((res)=>{
    6.     resolve(res);
    7. })
    8. .catch((err)=>{
    10.     console.log(err)
    11. })

    });

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

基本用法

Promise.all()

  1. 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()

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

说明：

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

Promise resolve()

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

Promise reject()

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

发表评论

表情：
评论列表 （有 0 条评论，98人围观）

还没有评论，来说两句吧...

相关阅读