vue-cli3-axios

1、安装依赖npm安装/cdn安装

npm install axios --save

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2.在main.js下引用axios

 import axios from 'axios'

3、将axios全局挂载到VUE原型上：

Vue.prototype.$http=Axios

main.js中：

4、get/post请求(脚手架中使用axios)

this.$http.get("url")
.then((res)=>{
 console.log(res);
 })
.catch(err => {
 console.log(err);
 }) 
 
this.$http.post("url")
.then((res)=>{
 console.log(res);
 })
.catch(err => {
 console.log(err);
 })

案例：

<script>
    export default {
        name: "UserEdit",
        data() {
            return {
                user: {
                    id: "",
                }
            }
        },
        methods: {
            findOne() {
                this.$http.get("http://localhost:8989/vue/user/findOne?id=" + this.user.id).then(res => {
                    console.log(res.data);
                    this.user = res.data;
                });
            },
           
        editUserInfo() {        
		        this.$http.post("http://localhost:8989/vue/user/update",this.user).then(res=>{
                    console.log(res);
                    if(res.data.success){
                       this.$router.push("/user");
                   }
               })
           }
       },
		created() {     //页面加载默认显示
				console.log("修改组件中获取的id: " + this.$route.query.id);
				         this.user.id = this.$route.query.id;
				         this.findOne();
				     }
				 }
</script>

5、get/post(非脚手架中使用axios)

 axios
.get("https://autumnfish.cn/search?xx="+xx)
.then(res => {
  console.log(res);
}) 
.catch(err => {
  console.log(err);
}) 

 axios
.post("https://autumnfish.cn/search",
 params:{
        title:'眼镜'
       })
.then(res => {
  console.log(res);
}) 
.catch(err => {
  console.log(err);
}) 

get案例：

document.querySelector(".get").onclick = function () {
   axios.get("https://autumnfish.cn/api/joke/list?num=6")
    .then(function (response) {
        console.log(response);
     },function(err){
        console.log(err);
     })
}

post案例：

document.querySelector(".post").onclick = function () {
  axios.post("https://autumnfish.cn/api/user/reg",   
    {username:"盐焗西兰花"})
    .then(function(response){
        console.log(response);
     },function (err) {
        console.log(err);
     })
  }