学到很多东西的诀窍，就是一下子不要学很多。——洛克

前言

、axios是什么？

Axios是通过Promise实现XHR封装，其中Promise是控制手段，XHR是实际发送Http请求的客户端。都是AJAX技术的一种具体实现。

因为vue的火爆让axios成为现在比较流行的异步请求方式。本文章只是针对新手，大佬可以跳过。

一、常用写法

1.第一种

代码如下（示例（get方式））

// get传参数        后端接收   req.query 
axios.get('请求地址', { 
    //参数/
    params: {
      ID: 12345
    }

}) .then(function (response) { console.log(response); }) 
.catch(function (error) { console.log(error); });

axios.get是get请求方式 ，params是参数属性里面写字段名：this.当前组件变量。then是成功后的回调函数，catch错误后的回调函数。

2.第二种

代码如下（示例（post方式））

//post传参
axios.post('/url',{

  firstName: 'Fred',        // 参数 firstName
    lastName: 'Flintstone'    // 参数 lastName

}).then(res=>{
console.log(res);
}).catch(err=>{

console.log(err);
});

二、向后台上传文件（图片）

代码如下（示例）：

html代码：

<input type="file"  v-on:change="update" nullmsg="新闻图片不能为空">

js代码：

param.append('files', file)向formData对象添加数据时候一定要注意：files是对应后台的参数名要不然传不过去的

update (e) {  // 上传照片


   let file = e.target.files[0]
   console.log({data:file})
  
   let param = new FormData() // 创建form对象
//注意files是对应后台的参数名哦   
param.append('files', file) // 通过append向form对象添加数据 
       //console.log(param);                                 // 添加form表单中其他数据
   console.log(param.get('files')) // FormData私有类对象，访问不到，可以通过get判断值是否传进去

   // 添加请求头
  axios.post('/admin/FileSave',param,{
                'Content-type' : 'multipart/form-data'
            })
    .then(response => {
        console.log(response.data)
     if (response.data.code === 0) {
       console.log(response.data)
     
     }
    
    })
  }
  //图片

}

总结

axios是十分方便的Http库，大家写的时候注意符号这些，用起来都是很快的。