axios教程

一、简介
1、axios是基于Promise,用于浏览器(script标签引入)和nodejs的,与服务端进行通信的库
2、特征:

二、使用
1、在需要的模块中引入使用:
import axios from ‘axios‘
2、语法:

  • axios( config )
  • axios[ method ]()
  • 返回值为promise,意味着可以接着在后面使用then捕获到成功,catch捕获到error
    3、支持的请求方式
  • axios.get( url[ ,config ] )
  • axios.post( url[ ,data[ ,config ] ] )
  • axios.delete( url[ ,config ] )
  • axios.head( url[ ,config ] )
  • axios.options( url[ ,config ] )
  • axios.put( url[ ,data[ ,config ] ] )
  • axios.patch( url[ ,data[ ,config ] ] )
    4、axios在created(){}里面使用,写在具体组件内,比如table.vue
    5、通过get方式向后端发送数据,数据是写在地址栏?后面的

三、案例

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
    import axios from ‘axios‘
export default {
  name: ‘HelloWorld‘,
  data () {
    return {
      msg: ‘Welcome to Your Vue.js App‘
    }
  },
  created(){
    /*axios.get(‘https://www.easy-mock.com/mock/5c1767c06ccaa7461ef01ee9/example/dataList‘,{
        params:{
            name:‘xiao‘,
                age:‘20‘
        }
    })
    .then((response)=>{
        console.log(response.data)
    })
    .catch((error)=>{
        console.log(error)
    })*/
        //发送给后端的数据附在url的?后面
        //Request URL:https://www.easy-mock.com/mock/5c1767c06ccaa7461ef01ee9/example/dataList?name=xiao

    axios.post(‘https://www.easy-mock.com/mock/5c1767c06ccaa7461ef01ee9/example/postData‘,{
            name:‘xiao‘  
        })
    .then((response)=>{
        console.log(response.data)
    })
    .catch((error)=>{
        console.log(error)
    })
  }
}
////数据是隐藏的,不会显示出来,放在Request Payload {name:‘xiao‘}
</script>

axios教程

上一篇:ipad安卓协议源码最新


下一篇:iOS 图片和音频的防盗链的应用