axios在Vue中的使用

1.首先在cmd中找到你的項目，

而後執行如下命令，安裝一下axios

 1 cnpm install axios --save //添加axios模塊

2 cnpm install qs --save //添加qs模塊（用於處理post請求的參數解析） 

 

2.添加成功後，在package.json文件中就能夠看到：

1 "dependencies": {
2     "axios": "^0.19.2",
3     "core-js": "^3.6.5",
4     "qs": "^6.9.4",
5     "vue": "^2.6.11",
6     "vue-router": "^3.2.0",
7     "vuex": "^3.4.0"
8 },

 

3.在main.js文件中導入這些模塊

1 import axios from 'axios'
2 import qs from 'qs'
3 //設置axios的基礎url部分
4 axios.defaults.baseURL = 'http://api.tianapi.com/';
5 //將axios掛載到vue實例上，使用時就能夠 this.$axios 這樣使用了
6 Vue.prototype.$axios = axios;
7 //將qs掛載到vue實例上，使用時就能夠 this.$qs 這樣使用了
8 Vue.prototype.$qs = qs;

 

4.Vue中axios的三種使用方法

 1 Vue.axios.get(api).then((response) => {
 2   console.log(response.data)
 3 })
 4 
 5 this.axios.get(api).then((response) => {
 6   console.log(response.data)
 7 })
 8 
 9 this.$http.get(api).then((response) => {
10   console.log(response.data)
11 })

 

5.在.vue文件中書寫代碼（1）

<template>
  <div class="about">
    <h1>全國省市疫情</h1>
    <table>
        <tr>
            <th>省市</th>
            <th>累計確診</th>
            <th>累計治癒</th>
            <th>現有確診</th>
            <th>累計死亡</th>
        </tr>
        <tr v-for="item in yq.newslist">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
  </div>
</template>
<script>
    export default{
        name:'About',
        data(){
            return {
                yq:{}
            }
        },
        created() {
            /*
            //get方式
            this.$axios.get('txapi/ncovcity/index',{
                params:{
                    key:'本身的key'
                }
            }).then(function(response) {
                console.log(response.data);
            }).catch(function(error) {
                console.log(error);
         });
            */
            //post方式
            this.$axios.post('txapi/ncovcity/index',this.$qs.stringify({
                key:'e0a32a8ea4275e9dbe2628d03bb91f3e'
            })).then((response)=> {
                this.yq = response.data;
                console.log(this.yq);
            }).catch((error)=> {
                console.log(error);
            });
        }
    }
</script>
<style scoped>
    table {
        width: 100%;
        text-align: center;
        border-bottom: solid 2px #DDD;
        /* 合併邊框 */
        border-collapse: collapse;
    }
    td,th {
        border-bottom: solid 1px #DDD;
        height: 40px;
    }
</style>

（2）

 1 <template>
 2     <div>
 3         <el-table :data="news">
 4             <el-table-column prop="id" label="id"></el-table-column>
 5             
 6             <el-table-column prop="name" label="name"></el-table-column>
 7             
 8             <el-table-column prop="psw" label="psw"></el-table-column>
 9         </el-table>
10     </div>
11 </template>
12 
13 <script>
14     export default {
15         data() {
16             return {
17                 
18                 news:[]
19             }
20         },
21         created(){
22             let than=this
23             this.$axios({
24                 methon:'post',
25                 url:'http://localhost:8888/pro0727/hello'
26             }).then(function(response){
27                 console.log(response);
28                 than.news=response.data
29             })
30         }
31     }
32 </script>
33 
34 <style>
35 </style>