vue-resource — 官方提供的vue的一个插件；

axios ---- 第三方插件，就是封装好的一个模块化的东西；
使用方法区别于vue-resource, 和以前封装的storage.js相似；
Vue中可以用,node.js、react中也可以用；
fetch-jsonp—

Github官网（https://github.com）搜索：”axios”.









在这里插入图片描述





=下面是
fetch-jsonp=属于第三方插件,

和AXios使用方法一致



建议使用官方提供的：vue-resource ;

Vue-resource 不需要哪里使用哪里引入，只需要在main.js中全局引入就可以使用；

main.js下:

 <script>
      Import  VueResource  from  ‘../xxx/vue-resource’
      Vue.use(VueResource );
</script>

使用Ajax请求数据,原生js封装也是ok的。

Axios [GET、POST请求数据]

一、Axios GET请求数据：
1、安装Axios: npm install axios --save
2、当前页面引入及使用Axios；

<template>
  <div class="getparams">
      <button @click="getMsg()">Axios请求数据</button>

    <ul>
      <li v-for="item  in  list">
      {{item.aid}}--{{item.catid}}--{{item.username}}--{{item.title}}--{{item.dateline}}
      </li>
    </ul>
  </div>
</template>
<script>
//当前页面引入Axios
import  Axios  from  'axios'
export default {
   data(){
       return{
           list:[]
       }
   },
   mounted(){//页面刷新时会触发
       console.log("===获取地址栏中的请求参数====");
   },
   methods:{
     getMsg(){
     
        var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1
        Axios.get(api).then((response)=>{
              //vue-resource 使用 response.body.xxx
              //axios 使用 response.data.xxx
              //具体结果更具响应结果字符串决定
              console.log("===response.data.result==="+response.data.result); 
              console.log("===response==="+JSON.stringify(response));
              this.list = response.data.result;
        },(error)=>{
              console.log("===error==="+error);
        })
     }
   }
}
</script>
<style>
 /** 
 .getparams{
     color:red;
 }
*/
</style>
响应数据格式：
{
    "data": {
        "result": [
            {
                "aid": "507",
                "catid": "20",
                "username": "admin",
                "title": "Nestjs仿小米商城企业级Nodejs项目实战视频教程",
                "pic": "",
                "dateline": "1610684312"
            },
            {
                "aid": "506",
                "catid": "20",
                "username": "admin",
                "title": "Ionic5+Vue3+Capacitor打造跨平台可以安装的App",
                "pic": "",
                "dateline": "1610684259"
            }
        ]
    },
    "status": 200,
    "statusText": "OK",
    "headers": {
        "content-type": "text/html; charset=utf-8"
    },
    "config": {
        "url": "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1",
        "method": "get",
        "headers": {
            "Accept": "application/json, text/plain, */*"
        },
        "transformRequest": [
            null
        ],
        "transformResponse": [
            null
        ],
        "timeout": 0,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "maxBodyLength": -1
    },
    "request": {}
}

二、Axios POST请求数据：

<template>
  <div class="getparams">
    <button @click="getMsg()">POST请求数据</button>
    <ul>
      <li v-for="(item,key)  in  list">
      {{item.id}}--{{item.content.name}}--{{item.content.type}}--{{item.content.layout}}
      </li>
    </ul>
  </div>
</template>
<script>
//当前页面引入Axios
import  Axios  from  'axios'
export default {
   data(){
       return{
           list:[]
       }
   },
   mounted(){//页面刷新时会触发
       console.log("===获取地址栏中的请求参数====");
   },
   methods:{

     getMsg(){
        var api = 'http://localhost:1000/getXfProgramListByUsername'
        //前端入参为json对象,后端入参自动转换为String类型；
        var param = {"username":"admin"};
        Axios.post(api,param,{emulateJSON:true}).then((response)=>{
             //后端返回String类型，前端接收到的为json对象
             console.log("==response===="+JSON.stringify(response));
             if(response.data.status=='SUCCESS'){
               this.list = response.data.data;
               this.$message("请求数据成功!");
             }else{
               this.$message("请求数据失败!");
             }
        },(error)=>{
           this.$message("请求出错"+error);
        }) 
      }
     }
   }
</script>
<style>
 /** 
 .getparams{
     color:red;
 }
*/
</style>