Fork me on GitHub

vue之axios的使用

一、环境安装

1、axios的安装

进入到对应工程目录执行：

npm install axios

2、启动测试数据的API

测试项目地址：https://github.com/ShenJianPing0307/VueTestAPI

二、使用axios

使用文档：https://github.com/axios/axios

1、发送get请求实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    {{ userInfo }}
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/axios/dist/axios.js"></script>

<script>

    new Vue({
        el:'#app',
        data:{
            userInfo:[]
        },
        created(){
          
            //发送get请求获取API数据,自行将json数据反序列化
            axios.get(' http://127.0.0.1:8000/api/userdata/')
                .then((response)=>{
                    // handle success
                    console.log(this); //使用箭头函数this才是Vue实例对象，否则是window对象
                    this.userInfo=response.data;
                    console.log(response.data);
                })
                .catch((error)=>{
                    // handle error
                    console.log(error);
                })
                .finally(()=>{
                    // always executed
                });
        }

    })

</script>

</body>
</html>

2、发送post请求实例

    addItem(context, payload) {

      //发送的直接是json数据，如果返回的是json数据直接就被反序列化了

      axios.post('http://127.0.0.1:8000/api/addUser/',payload.data)
        .then(response=>{
          if (response.data.state) {
            payload.successfunc();   //执行保存成功提示函数
          } else {
            payload.failturefunc(); //执行保存失败提示函数
          }
          //保存返回的数据状态，mutation修改state状态，所以传给mutation处理
          context.commit('ADDITEM', response.data);
        })

},
// 1、Content-Type: application/json

import axios from 'axios'
let data = {"id":"1","name":"aa"};
axios.post('http://127.0.0.1:8000/api/addUser/",data)
.then(res=>{
    console.log('res=>',res);            
})

// 2、Content-Type: multipart/form-data

import axios from 'axios'
let data = new FormData();
data.append('id','1');
data.append('name','aa');
axios.post('http://127.0.0.1:8000/api/addUser/",data)
.then(res=>{
    console.log('res=>',res);            
})

//Content-Type: application/x-www-form-urlencoded
import axios from 'axios'
import qs from 'qs'
let data = {"id":"1","name":"aa"};
axios.post('http://127.0.0.1:8000/api/addUser/",qs.stringify({
    data
}))
.then(res=>{
    console.log('res=>',res);            
})
发送post请求的三种方式

注意：在axios中处理逻辑中使用箭头函数，否则this就是window对象

返回值response中包含的信息：

axios.get(' http://127.0.0.1:8000/api/userdata/')
  .then(function (response) {
    console.log(response.data);//请求的数组数据
    console.log(response.status);//200
    console.log(response.statusText);//ok
    console.log(response.headers);//content-type: "text/html; charset=utf-8"
    console.log(response.config);//所有的配置信息包括url,headers,method等
  });

 

posted @ 2019-08-01 22:53  iveBoy  阅读(571)  评论(0)    收藏  举报
TOP