项目实战之接口处理篇~一文搞定接口请求

在项目开发中，接口请求是必不可少的，为了方便使用和维护，大家都会将接口请求的方法二次封装。下面小编将我项目中接口封装使用的方法分享给大家，希望可以帮到大家。喜欢的给个三连击再走哟。

目前前端常用的请求方式主要有两种：axios、Fetch。下面小编就这两种给大家详细的介绍介绍。
axios

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。
特点

从浏览器中创建 XMLHttpRequest
支持 Promise API
客户端支持防止CSRF
提供了一些并发请求的接口（重要，方便了很多的操作）
从 node.js 创建 http 请求
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据

兼容性问题
axios在PC端浏览器的兼容性问题

axios支持IE8+，但原理是基于promise之上实现的，因此会存在不兼容IE的问题。

trident内核的浏览器下会报：vuex requires a Promise polyfill in this browser

解决方式：

安装 babel-polyfill

npm install babel-polyfill -s

安装成功以后需要在 main.js 中引入 babel-polyfill

一般会配置 webpack.base.config.js 中 entry

module.exports = {
context: path.resolve(__dirname, ‘…/’),
entry: {
app: [“babel-polyfill”, “./src/main.js”]
// app: ‘./src/main.js’
},
}

axios在安卓低版本兼容性处理

在较低版本的安卓手机中发现发现封装的axios请求无效，主要原因还是低版本的安卓手机无法使用promise

解决方式：

安装 es6-promise

npm install es6-promise -s

引入注册es6-promise

一定要在axios注册之前

// 注意： es6-promise 一定要在 axios 之前注册

promise.polyfill()

或者

require(‘es6-promise’).polyfill();

更多请见：http://www.mark-to-win.com/tutorial/50669.html