Use of vue of axios

First, the installation environment

1, axios installation

Into the corresponding project directory execute:

npm install axios

2, start the test data API

Test Project Address: https://github.com/ShenJianPing0307/VueTestAPI

Second, the use axios

Use document: https://github.com/axios/axios

Example send get request:

<!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数据
            axios.get(' http://127.0.0.1:8000/api/userdata/')
                .then((response)=>{
                     // handle Success 
                    the console.log ( this ); // Use the arrow is Vue this instance of the object function, the window object otherwise 
                    this .userInfo = response.data; 
                    the console.log (response.data); 
                }) 
                . The catch ( (error) => {
                     // handle error 
                    the console.log (error); 
                }) 
                . the finally (() => {
                     // Always Executed 
                }); 
        } 

    })

 </ Script>

</body>
</html>

NOTE: Use the arrow axios processing logic functions, otherwise this is the window object

Returns the value contained in the response message:

axios.get ( 'http://127.0.0.1:8000/api/userdata/' ) 
  .then ( function (Response) { 
    the console.log (response.data); // array data request 
    console.log (response. Status); // 200 is 
    the console.log (response.statusText); // OK 
    the console.log (Response.Headers); // Content-type: "text / HTML; charset = UTF-. 8" 
    the console.log (Response. config); // All the configuration information includes url, headers, method, etc. 
  });

Guess you like