axios的使用

1.引入axios.js文件

1.1 导入axios.min.js文件

<script src="./axios.min.js"></script>

1.2 导入axios.min.js文件

2 写好代码结构

如:

		var vm=new Vue({
           el:'#app',
           data:{
               //定义js使用的变量，设置初始值
           },
           created () {
               //Vue中生命周期的方法
               //在数据显示之前执行这个方法
               //一般来讲，调用方法得到数据
           },methods:{
               //定义使用到的一些方法
           }
        });

3 在方法中使用axios请求数据

如：

		  data:{
               //定义js使用的变量，设置初始值
               teacherList:[]
           },
           created () {
               //Vue中生命周期的方法
               //在数据显示之前执行这个方法
               //一般来讲，调用方法得到数据
               this.getTeacherList();
           },
			methods:{
               //定义使用到的一些方法
               getTeacherList(){
                   //axios发送ajax请求得到数据
                   axios.get("请求的后台接口路径")
                    .then(response=>{
                        //response 是调用后台接口返回的数据
                        //通过response获取后台接口返回的数据
                    })
                    .catch(error=>{
                        //error是错误信息
                    })
               }
           }

在methods中定义一些方法，比如“获取所有讲师”、“根据Id查询”等，在这些方法中调用axios获取后代接口返回的数据，axios.get()是请求方式，then()是请求成功之后需要执行的方法，如果出错则执行catch()方法。

3.1 axios的几种请求方式

3.1.1 get请求

一般多用于获取数据

//请求的地址实际为 localhost:8080/url?id=12
带参数:axios.get('/url', {params: {id: 12}})
不带参数:  axios.get('/url')

3.1.2 post请求

主要提交表单数据和上传文件,传参数据必须放在消息主体中

let data = {}
let config = {}
方式一:  axios.post('/url',data,config)
方式二:
this.$axios.post(url, {a: '1'})
  .then(response => {
    //成功返回
    console.log(response);
  })
  .catch(error => {
    //失败返回
    console.log(error);
  });
/*---------------------------------*/
  其中 data可以有两种格
  form-data(图片上传,文件上传)  
  applicition/json（目前比较流行）      
    上面两种方法 都是 appliction/json格式　　　　
    如下为: form-data　　　
    let formData = new FormData()       
    let data = {id:12}       
    for (let key in data) {
    	formData.append(key, data[key])  
    }
    axios({
    	methods: 'post',
    	url: '/url',
    	data: formData
    })
//该请求发出之后可以在浏览器中查看此次请求的
//request header里面content-type: 为 form-data形式

3.1.3 put请求

对数据进行更新
该请求和post类似，只是请求方法不同

3.1.4 delete请求

参数可以放在url上也可以和post一样放在请求体中

//参数在url 
//params很重要
axios.delete('/url', {params: {id: 12}})
//参数在请求体中 
//将params改为 data就行
axios.delete('/url', {data: {id: 12}}) 　

4 给初始化参数赋值显示

如：

//查询所有讲师
        var vm=new Vue({
           el:'#app',
           data:{
               //定义js使用的变量，设置初始值
               teacherList:[]
           },
           created () {
               //Vue中生命周期的方法
               //在数据显示之前执行这个方法
               //一般来讲，调用方法得到数据
               this.getTeacherList();
           },methods:{
               //定义使用到的一些方法
               getTeacherList(){
                   //axios发送ajax请求得到数据
                   axios.get("teacher.json")
                    .then(response=>{
                        //response 是调用后台接口返回的数据
                        //通过response获取后台接口返回的数据
                        console.log(response);
                        this.teacherList = response.data.data.items;
                        console.log(this.teacherList);
                    })
                    .catch(error=>{
                        //error是错误信息
                    })
               }
           }
        });