axios教程

Posted 2021-01-28

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

• 支持Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
  3、使用
• CDN地址：https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js
• node npm install axios --save-dev

二、使用
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>