简述Axios

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

封装axios和管理接口

npm安装

npm install axios

cdn使用

<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 要封装axios基本需要两步： 1、统一管理请求方式和请求配置 2、统一管理接口

既然封装需要两步 那么我们就分别写两个文件 一个文件负责统一管理请求方式和请求配置 另一个文件负责统一管理接口 笔者建议把两个文件放在一个文件夹中便于查找

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

List item

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

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

在项目中使用

***引入：***引入也有好几种方式 这里简单说两种 比如你在.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("账号或密码错误"); } }); },

**

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

**