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

阳光穿透心脏的1/2处 2021-07-25 01:14 270阅读 0赞

**目录**

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拿到地址了