一、axios是什么
axios 是一个轻量的 HTTP客户端 基于 XMLHttpRequest 服务来实行 HTTP 请求，支持丰富的设置，支持 Promise，支持欣赏器端和 Node.js 端。自Vue2.0起，尤大公布取消对 vue-resource 的官方保举，转而保举 axios。现在 axios 已经成为大部分 Vue 开发者的首选。
特性
- 从欣赏器中创建 XMLHttpRequests
- 从 node.js 创建 http请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 主动转换JSON 数据
- 客户端支持防御XSRF
现实上，axios可以用在欣赏器和 node.js 中是由于，它会主动判断当前情况是什么，如果是欣赏器，就会基于XMLHttpRequests实现axios。如果是node.js情况，就会基于node内置核心模块http实现axios
简单来说，axios的根本原理就是
- axios还是属于 XMLHttpRequest， 因此必要实现一个ajax。大概基于http 。
- 还必要一个promise对象来对效果进行处置惩罚。
根本利用
安装
// 项目中安装npm install axios --S// cdn 引入<script src="https://unpkg.com/axios/dist/axios.min.js"></script>导入
import axios from 'axios'发送请求
axios({ url:'xxx', // 设置请求的所在 method:"GET", // 设置请求方法 params:{ // get请求利用params传参,如果是post请求则用data name:'' }}).then(res => { // res为后端返回的数据})二、为什么要封装
axios 的 API 很友爱，你完全可以很轻松地在项目中直接利用。不外随着项目规模增大，如果每发起一次HTTP请求，就要把这些比如设置超时时间、设置请求头、根据项目情况判断利用哪个请求所在、错误处置惩罚等等利用，都必要写一遍。
这种重复劳动不仅浪费时间，而且让代码变得冗余不堪，难以维护。为了进步我们的代码质量，我们应该在项目中二次封装一下 axios 再利用。
举个例子：
axios('http://localhost:3000/data', { // 设置代码 method: 'GET', timeout: 1000, withCredentials: true, // 当前请求为跨域范例时是否在请求中协带cookie 必要注意的是当设置了 xhr.withCredentials = true时，必须在后端增长 response 头信息Access-Control-Allow-Origin，且必须指定域名，而不能指定为* headers: { 'Content-Type': 'application/json', Authorization: 'xxx', }, transformRequest: [function (data, headers) { // 允许在向服务器发送前，修改请求数据 // 对 data 进行任意转换处置惩罚 return data; }], transformResponse: [function (data) { // 在转达给 then/catch 前，允许修改响应数据 // 对 data 进行任意转换处置惩罚 return data; }], // 其他请求设置...}).then((data) => { // todo: 真正业务逻辑代码 console.log(data);}, (err) => { // 错误处置惩罚代码 if (err.response.status === 401) { // handle authorization error } if (err.response.status === 403) { // handle server forbidden error } // 其他错误处置惩罚..... console.log(err);}); 如果每个页面都发送类似的请求，都要写一堆的设置与错误处置惩罚，就显得过于繁琐了，这时间我们就必要对axios进行二次封装，让利用更为便利
点击看下篇怎样封装 |
