vue工程 axios请求数据传统使用方法介绍+经验优化使用方法

目录

vue工程 axios请求数据使用传统介绍+经验优化

一、axios介绍

二、axios安装

三、axios入口配置

四、axios使用

4.1 get请求

4.1.1 不带参数

4.1.2 带参数

4.2 post请求

4.3 post带token

五、改进优化设置

---

---

vue工程 axios请求数据使用传统介绍+经验优化

一、axios介绍

    在vue高版本项目中，很多使用axios进行ajax请求，而不再使用vue-resource了。axios是基于promise的HTTP库，并没有install方法，所以不能使用Vue.use()方法进行使用。

二、axios安装

    先安装axios依赖qs依赖（备注：qs依赖是post请求时候才需要，如果不是post请求不需要安装qs）

npm install axios --save
npm install qs --save

备注一个知识点吧：

有些小白可能搞不清楚，--save  --dev  -S -D的区别，简单说下：

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

绝大多数项目的开发，应该是需要部署上线的，所以如果记不住，就全部用--save吧

三、axios入口配置

题外话：在vue项目中，插件的使用，其入口文件一般都在main.js中引入，因为main.js是项目运行时候首先运行的文件。

    入口配置的目的是，如果不配置的话，任何vue文件中，如果要使用的话，都需要import axios form 'axios'这样先引入再使用，这一般不是我们所希望看到的便捷的使用方式，任何一个项目，请求后台数据的地方都多，所以需要有个一劳永逸的设置，这就需要在入口时候配置下，跟vue属性绑定到一块，可以直接调用。

在main.js中设置：

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

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

四、axios使用

4.1 get请求

4.1.1 不带参数

this.$axios.get("url地址").then(res => {
    console.log(res);
})

4.1.2 带参数

this.$axios.get("url地址",{
    params:{            
        phone:12345678   //参数，键值对，key值：value值
        name:hh
    }
}).then(res => {
    //获取你需要用到的数据
});

 

4.2 post请求

this.$axios.post(“后台接口地址”,this.$qs.stringify({phone：12345678，name：hh})
).then(res =>{
    //获取你需要的数据
});

4.3 post带token

this.$axios.post(“后台接口地址”,{
 params:this.$qs.stringify({phone：12345678，name：hh}),
 headers:{
    'token':'43435454543',
    'content-type':'application/json'}
 }
).then(res =>{
    //获取你需要的数据
});

 

五、改进优化设置

    开发中的URL地址一致都是由协议+域名+端口+接口路由+参数等组成，通常这些中协议+域名是一样的，需要不断的被复用，并且很多开发环境和部署环境很多时候IP地址和端口都不一样，但接口路由之类的都是一样的，如果更换后台部署环境的话，需要找每个用到的地方进行修改，太麻烦。

    所以可以设置一个全局的环境，用来存储公用的协议+域名，这样更换后台部署环境时候，只需要改一次即可。具体操作如下：

1）新建一个globalUrl.js文件

//globalUrl.js文件
const myUrl="http://123.456.78.10";
export default{
    myUrl        //一定要使用export default给暴露出去，不然使用不了，这是套路。
}

2）、使用

2.1 局部使用

    局部使用就是那里用到加入到那里，哪个vue文件使用时候，先import这个globalUrl.js文件，然后再使用myUrl

2.2 全局使用

备注：所有全局使用的都要在main.js中设置，并且一般都是绑定vue属性

在main.js文件中：

import Global from 'globalUrl路径'   //引用
Vue.prototype.GLOBAL = Global;   //挂载原型，可以使用this.GLOBAL.myUrl拿到地址了