介绍vue项目中的axios请求（get和post）

1、先安装axios依赖，还有qs依赖

npm install axios --save

npm install qs --save

qs依赖包用post请求须要用到的

插入一个知识点：

npm install X --save 会把依赖包安装在生产环境中，而且把依赖包名称添加到 package.json 文件 dependencies。
而若是npm install X --save-dev则会把依赖包安装在开发环境中，而且添加到 package.json 文件 devDependencies
若是vue项目要部署上线，为防止依赖包失效，通常采用–save

2、在main.js入口引用

import qs from 'qs';
import axios from "axios";

//下面是将$axios和$qs挂在原型上，以便在实例中能用 this.$axios可以拿到
Vue.prototype.$axios = axios;
Vue.prototype.$qs = qs;

3、定义全局变量复用域名地址

开发中的url通常是由协议+域名+端口+接口路由+参数组成
通常 协议+域名 这两个部分是在axios是须要一直被复用的，因此能够设置一个专业的全局变量模块脚本文件，在模块里直接定义初始值，用export default 暴露出去，再入口文件main.js里面引入这个文件地址，而且使用Vue.prototype挂载到vue实例上面

• 首先在static文件下面的config文件里面新建一个 global.js文件（命名随意）
• 在global.js文件下定义全局变量，这个项目我是定义服务器地址。

• 在main.js入口文件引用并挂载

import Global from '../static/config/global'   //引用
Vue.prototype.GLOBAL = Global;   //挂载原型，能够使用this.GLOBAL拿到global.js的内容

4、请求后台接口数据（get请求和post请求）
1.get请求

• 不须要带参数的get请求

this.$axios.get(this.GLOBAL.host.+“后台接口地址”).then(res => {
//获取你须要用到的数据
})

• 须要带参数的get请求

this.$axios.get(this.GLOBAL.host.+“后台接口地址”,{
    params:{            
        phone:12345678   //参数，键值对，key值：value值
        name:hh
    }
}).then(res => {
    //获取你须要用到的数据
});

2.post请求

var data = {phone：12345678，name：hh}  //定义一个data储存须要带的参数
this.$axios.post(this.GLOBAL.host+“后台接口地址”，this.$qs.stringify(data)
).then(res =>{
    //获取你须要的数据
});

5、 所有代码

// main.js文件

import axios from "axios";
import qs from 'qs';
import Global from '../static/config/global';

Vue.prototype.$axios = axios
Vue.prototype.$qs = qs;
Vue.prototype.GLOBAL = Global;

// global.js文件

const host = '协议+域名地址+端口';
export default {
  host
}

// 组件中发送axios请求（举个例子）

<template>
    <div class="sort">
        <li v-for="cate in categoryList" >{{cate.name}}</li>
    </div>
</template>

<script>
    export default {
        created(){
            this.getCategory();
        },
        data(){
            return{
                categoryList:[]
            }
        },
        methods:{
            getCategory:function(){
                this.$axios.get(this.GLOBAL.host+"/虚拟接口/a/all_category").then(res => {
                    var result=res.data;
                    if(result.code==0){
                        this.categoryList=result.data;
                    }
                });
            }
        }
    }
    
</script>

<style scoped>
    /*样式*/
    
    
</style>