大家好，我是minijie，潜水于掘金和思否的一名前端小小生，今天看了几篇文章关于vue中怎么去封装axios，视乎好多版本都是基于promise去做的。这让我很疑惑，axios不就是基于promise的一个请求库吗？为啥还要多一层promise呢？
下面是根据我自己的想法去基于axios+ansyc去封装一个自己用的请求库，有疑惑的可以在下方留言讨论
1、首先通过npm去下载axios(我推荐使用cnpm，比较是国内快一点)
npm install axios复制代码
2、在vue-cli中 src目录中创建一个叫api的文件夹(当然名字自己喜欢就可以了，取上面看自己)，并在api文件中创建一个叫https.js文件
目录结果如图
3、在https.js文件中写代码：
首先导入aixos和vue模块 可以去官axios方先看看文档 ✈✈
import axios from 'axios'import Vue from 'vue'复制代码
环境的选择
var BaseUrl = ""; //请求的地址因为我是用node代理测试环境已经配好了if (process.env.NODE_ENV == 'development') { //开发用的 BaseUrl = '';}else if (process.env.NODE_ENV == 'debug') { // 调试用的 BaseUrl = '';}else if (process.env.NODE_ENV == 'production') { // 线上环境 BaseUrl = 'https://echarts.baidu.com/examples/';}复制代码 写一个基础请求我这里命名为requestFN
function requestFN(o) { //基础请求方法 //o.type //请求类型 //o.url //请求路径 var obj = { method: o.type, //请求的类型 url: BaseUrl + o.url //请求地址 } if (o.hasOwnProperty("params")) { obj.params = o.params; //url后面带参数 如 https://echarts.baidu.com/examples/a?test="1" } else if (o.hasOwnProperty("data")) { obj.data = o.data; // data 带参数 } 这里做好多事情比如说有没有携带token cookie这类没用肯定要dosoming的啦， 根据你的业务需要自己加吧，我这里就不写了，如有疑问可以留言我 //返回axios的基础方法 return axios(obj).then(r => { return r.data; //方法请求的数据 })}复制代码 定义一个GET请求方法 我这里采用的是async
async function getFN(o) { //get方法 var result = await requestFN(o); return result;}复制代码 定义一个POST方法也是如此
async function postFN(o) { //get方法 var result = await requestFN(o); return result;}复制代码 设置一下超时时间
axios.defaults.timeout = 10000;复制代码
最后我们把它写在vue的原型上面，并暴露出去
const install = () => { Vue.prototype.getFN = getFN; //GET方法 Vue.prototype.postFN = postFN; //POST方法}export default install;复制代码 当然很多时候我们会处理一些异常的状态码，比如说后端大哥说没有token我这边会给你一个40103的状态码，你自己去做处理，这个时候我们就要用到响应拦截器喽
axios.interceptors.response.use( response => { //成功请求的状态码 //注意状态码是根据后端返回给我的,要自己根据业务需求去写我这里只是做实例 if (response.status == 200) { return Promise.resolve(response); } else { return Promise.reject(response); } }, error => { //失败请求的状态码 if (error.response) { switch (error.response.status) { case 40103: router.replace({ path: '/login' }); localStorage.removeItem("tokenValue"); break; } return Promise.reject(error.response.data) } });复制代码 这样我们就完成一个axios的请求封装
另外我们还需要将这个文件代入到main.js里面
mian.js文件：
import https from './api/https';地址根据你实际情况引入Vue.use(https); 复制代码
我们看效果
先看看vue的原型上有没有我们这两个方法
有了这个我们就可以用this.getFN 或this.postFN去根据业务去请求数据了
我这里展示我的结果
代码：
结果：
美滋滋，希望对大家有所帮助
最后提供node代理配置，用于解决跨域
找到config---index.js文件
代码：
const host = "https://echarts.baidu.com/examples/"; // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/': { target: host + '', changeOrigin: true, pathRewrite: { '^/': '' } } },复制代码 谢谢
转载请留下地址，禁止商业转载
有问题可以反馈给我 qq：652165177
GitHub地址：
====未完待续====