axios请求接口http_超级简单好用的 Vue封装axios

简述Axios

Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post请求。说到get、post，项目比较大的时候可以使用axios来统一管理请求方式和接口 这样后期就方便维护和修改

封装axios和管理接口

npm安装

npm install axios

cdn使用

<script src="/axios/dist/axios.min.js"></script>

要封装axios基本需要两步：

1、统一管理请求方式和请求配置

2、统一管理接口

既然封装需要两步 那么我们就分别写两个文件 一个文件负责统一管理请求方式和请求配置

另一个文件负责统一管理接口笔者建议把两个文件放在一个文件夹中便于查找

1、统一管理请求方式和请求配置

请求配置包括 环境的切换 请求拦截和响应拦截 或者是设置超时时间

请求方式 ：

统一管理接口 ：

请求接口这里也可以写成是 一个一个的方法然后抛出 笔者写的是一个对象然后抛出这个对象 当然 大道殊途同归

在项目中使用

引入：引入也有好几种方式 这里简单说两种 比如你在.vue文件中引入 如果说你觉得在每个.vue文件中单独引入的话 会很繁琐 代码不整洁（最好别有强迫症）你也可以在main.js中全局引入 然后挂载在Vue的原型上边

import API from '../src/Network/api' // 引入入口文件

Vue.prototype.$http = API // 挂载在原型上

然后就可以在项目中愉快的使用了

直接上代码 ：

add() { // 这里是一个POST请求

this.$http

.login({

mobile: this.username,

password: this.password,

type: 1,

client: 1

})

.then(res => {

console.log(res);

if (res.data.code == 200) {

this.$router.push({

path: "/My"

});

} else {

this.$toast("账号或密码错误");

}

});

},

好了 就这样简单写一下吧 加油 奥利给！！