Vue前后端交互

小鱼儿 2022-10-14 00:43 19阅读 0赞

<template>
      <div id="app">
          <h3>1. Promise基本使用</h3>
          <input type="text" disabled="false" v-model="msg" />
          <input type="button" value="发送定时任务" @click="handler" />
          <hr>
          <h3>2. 基于Promise处理Ajax请求</h3>
          <input type="button" value="发送Ajax请求" @click="handler1" />
          <hr>
          <h3>3. 接口调用fetch用法</h3>
          <input type="button" value="发送fetch请求[GET]" @click="handler2" />
          <input type="button" value="发送fetch请求[POST/参数]" @click="handler3" />
          <input type="button" value="发送fetch请求[POST/JSON]" @click="handler4" />
          <hr>
          <h3>4. 接口调用axios用法</h3>
          <input type="button" value="发送axios请求[GET]" @click="handler5" />
          <input type="button" value="发送axios请求[POST]" @click="handler6" />
          <h3>4.1 axios请求拦截器</h3>
          <input type="button" value="axios请求拦截器" @click="handler7" />
          <h3>4.2 axios响应拦截器</h3>
          <input type="button" value="axios响应拦截器" @click="handler8" />
          <hr>
          <h3>5. 接口调用async和await用法</h3>
          <input type="button" value="接口调用async和await用法" @click="handler9" />
      </div>
    </template>
    
    <script>
    
    
    export default {
      name: 'App',
      data: () => {
    	  return {
          msg: '冲冲冲'
        }
      },
      methods: {
        handler: () => {
          let p = new Promise((resolve, reject) => {
            let flag = Math.random()//[0,1)
            setTimeout(() => {
              if(flag>=0.5){
                resolve('请求成功')
              }else{
                reject('请求失败')
              }
            },2000)
          })
    
          p.then((ret) => {
            console.log(ret)
    
          })
          .catch((error) => {
            console.log(error)
          })
        },
        queryData(url) {
          let p = new Promise(function(resolve, reject){
            let xhr = new XMLHttpRequest()
            xhr.onreadystatechange = function() {
              if(xhr.readyState != 4)return
              if(xhr.readyState == 4 && xhr.status == 200){
                resolve(xhr.responseText)
              }else{
                reject('请求出错')
              }
            }
            xhr.open('GET',url)
            xhr.send(null)
          })
          return p
        },
        handler1() {
          this.queryData('http://localhost:8080/api/user/info/1')
          .then((data) => {
            console.log(data)
            return this.queryData('http://localhost:8080/api/user/info/2')
          },(error) => {
            console.log(error)
          })
          .then((data) => {
            console.log(data)
             return this.queryData('http://localhost:8080/api/user/info/3')
          },(error) => {
            console.log(error)
          })
          .then((data) => {
            console.log(data)
          },(error) =>{
            console.log(error)
          })
        },
        handler2() {
          fetch('http://localhost:8080/api/user/info/4')
          .then(data => {
            return data.text()
          })
          .then(ret => {
            console.log(ret)
          })
        },
        handler3() {
          fetch('http://localhost:8080/api/user/add',{
          method: 'POST',
          body: 'id=1&name=jerry&sex=男&age=22',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }})
          .then(data => {
            return data.text()
          })
          .then(ret => {
            console.log(ret)
          })
        },
        handler4() {
          fetch('http://localhost:8080/api/user/add',{
          method: 'post',
          body: JSON.stringify({
            id: 2,
            name: 'Tom',
            sex: '女',
            age: 28
          }),
          headers: {
            'Content-Type': 'application/json'
          }})
          .then(data => {
            // return data.text()
            return data.json()
          })
          .then(ret => {
            console.log(ret)
            console.log(ret.id+'--'+ret.name+'--'+ret.sex+'--'+ret.age)
          })
        },
        handler5() {
          this.$axios.get('http://localhost:8080/api/user/info/20')
          .then(data => {
            console.log(data)
            console.log(data.data.name)
          })
        },
        handler6() {
          this.$axios.post('http://localhost:8080/api/user/add',{
            id: 22,
            name: 'Kitty',
            sex: 'female',
            age: 18
          })
          .then(ret => {
            console.log(ret.data)
          })
        },
        handler7() {
          this.$axios.interceptors.request.use(config => {
            config.headers.mytoken = 'kitty'
            return config
          }, error => {
            console.log('error')
          })
          this.$axios.get('http://localhost:8080/api/user/info/18')
          .then(data => {
            console.log(data)
            console.log(data.data.name)
          })
        },
        handler8() {
          this.$axios.interceptors.response.use(ret => {
            console.log(ret)
            return ret.data
          })
          this.$axios.get('http://localhost:8080/api/user/info/8')
          .then(data => {
            console.log(data)
          })
        },
        queryaxios: async function(url) {
          const ret = await this.$axios.get(url)
          // console.log('async: ' + ret.data)
          return ret
        },
        handler9() {
          this.queryaxios('http://localhost:8080/api/user/info/10')
          .then(ret => {
            console.log(ret.data)
          })
        }
      },
      components: {
    
      }
    }
      // async function queryaxios(url) {
      //   let ret = await vm.$axios.get(url)
      //   console.log(async+': '+ret)
      //   return ret
      // }
    </script>
    
    <style>
    #app {
    
    }
    </style>