封装axios

封装axios

首先，我们要了解，为什么要封装axios？不封装axios如何使用？

axios是什么？

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

它能做什么/特性？ 从浏览器中创建 XMLHttpRequestsnode.js 创建 http 请求node.js 创建 http 请求拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF

安装：

$ npm install axios

执行 GET 请求

// 为给定 ID 的 user 创建请求 //axios.get('url') axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // 可选地，上面的请求可以这样做 axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });

执行 POST 请求

axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });

执行多个并发请求

function getUserAccount() { return axios.get('/user/12345'); } function getUserPermissions() { return axios.get('/user/12345/permissions'); } axios.all([getUserAccount(), getUserPermissions()]) .then(axios.spread(function (acct, perms) { // 两个请求现在都执行完成 }));

基础使用【我是用的是脚手架，vue已配置好 】：

在main.js中配置 import axios from ‘axios’ Vue.prototype.$axios = axios;

详细可见 axios官网或是 这里

为什么要封装axios?

对于页面较少的项目，直接用axios或许没有什么大的影响，但一旦我们的项目越做越大，页面组件越来越多，面对上百个接口，直接使用axios使得我们后期的维护和修改变得吃力起来。因为我们必须要找到需要修改的页面，然后进去修改，整个过程显得既繁琐又不易于项目的维护和迭代。 这个时候如果我们同意的区管理接口，需要修改某一个接口时，直接在api里修改对应的请求就显得方便得多。

以上部分引用 这里

如何封装？

首先对于一个项目，我们应该先创建一个network文件夹存放网络文件

然后创建三个js文件，分别是：config、index、core index： 封装具体的业务请求 config：统一管理请求方式 core：网络模块核心代码

index：

config：

core：

如何在页面组件使用？

//main.js中配置 import network from "./network/index"; Vue.prototype.$network = network; mounted(){ this.$network.getStoreList().then(res=>{ //getStoreList: 在index【network】中创建的函数 //$network: 在main.js中得配置 window.console.log(res) }).catch(err=>{ window.console.log(err) }) }

二次封装的目的

便于维护：对于一个项目来说，代码一定要利于维护，当细节发生变化时，可修改接口内部实现，接口使用方无需配套修改。

统一实现：封装底层实现，形成项目特有的api实现，可统一和规范项目中的代码实现，避免天花乱坠的实现，从而难以维护。

程序复用：封装时，需充分考虑程序的可复用性，通过提供接口api的形式让使用者来实现细节。

二次封装的效果

将axios封装成Vue插件使用

统一api请求（基于Vue全局、基于单个Vue实例）

统一axios默认值配置方式

暴露接口统一由使用方配置请求、响应拦截器

暴露接口统一由使用方配置请求、响应拦截器

内部默认实现重复请求拦截的拦截器 有更详细的内容在这里

本文引用文档有：

axios官网 看云 知乎 简书