axios学習ノート

35042 ワード

vue.js

文書ディレクトリ

axios学習ノート

1.axiosのget方式要求インタフェース

静的インタフェースデータ要求方式

動的インタフェース要求方式

2.axiosのpost方式要求インタフェース

json形式コミット

form提出

file提出

単一ファイル提出

複数のファイル提出

三.axiosの同時

4.axiosのカスタムインスタンス

5.axiosブロッキング

axios学習ノート
axiosを使用する前にaxiosファイルを導入する
一.axiosのget方式要求インタフェース
静的インタフェースデータ要求方式

//1
	axios.get('url') //    
		.then(res => console.log(res)) //    
		.then(err => promise.reject(err)) //    
//2
	axios({ //axios          get
          url: 'url'
        }).then(res => console.log(res ))
          .catch(err => Promise.reject(err))

ダイナミックインタフェース要求方式

axios.get('url',{
          params: { //  
              :' '
          }
        }).then(res => console.log(res))
          .catch(err => Promise.reject(err))

二.axiosのpost方式要求インタフェース
jsonフォーマットコミット

    axios.post('url',{
          username: '',   //     
          password: ''
        }).then(res => console.log(res))
          .catch(err => Promise.reject(err))

formコミット

 const p = new URLSearchParams()
        p.append('username','')      //     
        p.append('password','')
        axios.post('url',p,{
          headers: {   //   
            'Content-Type': 'application/x-www-form-urlencoded' 
          }
        }).then(res => console.log(res))
          .catch(err => Promise.reject(err))

fileコミット
単一ファイルのコミット

        const p = new FormData()
        p.append('file',e.target.files[0])  //  
        axios.post('url',p,{
          headers: {  //   
            'Content-Type': "multipart/form-data"
          }
        }).then(res => console.log(res))
          .catch(err => Promise.reject(err))

複数ファイルのコミット

 const p = new FormData()
        p.append('filename','')   //   
        p.append('file',e.target.files[0])  //  
        axios.post('url',p,{
          headers: { 
            'Content-Type': 'multipart/form-data'
          }
        }).then(res => console.log(res))
          .catch(err => Promise.reject(err))

三.axiosの同時

<body>
  <div id="app">
    <button @click="send">    </button>
    <button @click="sendMore">          </button>
  </div>
</body>
<script src="../../lib/vue.js"></script>
<script>
  //!          ，   ？
  new Vue({
    el: '#app',
    methods: {
      sendMore () {
        const p1 = new Promise((resolve,reject) => {
          resolve(1)
        })
        const p2 = new Promise((resolve,reject) => {
          setTimeout(function () {
            resolve(1)
          },3000)
        })
        axios.all([p1,p2])
        .then(axios.spread(function (acct, perms) {
          //            
          console.log(acct,perms)  //      
        }));
      },
      send () {
        const p1 = new Promise((resolve,reject) => {
          resolve(1)
        })
        const p2 = new Promise((resolve,reject) => {
          setTimeout(function () {
            resolve(1)
          },3000)
        })
        
        axios.all([p1,p2]).then(res => console.log( res ))  //      
      }
    }
  })
</script>

四.axiosのカスタムインスタンス

 const ins = axios.create({
    baseURL: 'http://59.110.226.77:3000',//            
    timeout: 4000
    headers: { 'Content-Type': 'multipart/form-data'},
  })

五.axiosブロッキング

<style>
    .loading-box{
      position: fixed;
      left: 0;top:0;
      width: 100%;height: 100%;
      background: rgba(0,0,0,.7);
      color: white;
      display: none;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="loading-box">     </div>
  <div id="app">
    <input type="text" v-model="username" placeholder="      "> <br>
    <input type="text" v-model="password" placeholder="     ">
    <button @click="postForm">        - post-     </button>
  </div>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="../../lib/vue.js"></script>
<script>
  const loadingBox = document.querySelector('.loading-box')
  loadingBox.style.lineHeight = document.documentElement.clientHeight + 'px'
  const ins = axios.create({
    baseURL: 'http://59.110.226.77:3000',//            
    timeout: 4000,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
  })
  ins.interceptors.request.use(function (config) {
    loadingBox.style.display = 'block'
    return config
  },function (err) {
    return Promise.reject(err)
  })
  //      
  ins.interceptors.response.use(function (res) {
    loadingBox.style.display = 'none'
    return res // res         
  },function (err) {
    return Promise.reject(err)
  })
  new Vue({
    el: '#app',
    data: {
      username: '',
      password: '',
    },
    methods: {
      postForm () {
        const p = new URLSearchParams()
        p.append('username',this.username)
        p.append('password',this.password)
        ins.post('/api/user/login',p,{
        }).then(res => console.log(res))
          .catch(err => Promise.reject(err))
      },
    }
  })

</script>

Java 8の新しい特性の学習を覚えます(中間編)---関数式インタフェース@FunctionalInterface

【力扣日记】088合并两个顺序配列|面接问题10.01