vue-cli中怎么基于axios去封装方法

baiy 发布于2019-08-23 16:20 / 1439人阅读

摘要：大家好，我是，潜水于掘金和思否的一名前端小小生，今天看了几篇文章关于中怎么去封装，视乎好多版本都是基于去做的。

**大家好，我是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地址：我的地址

GPU服务器云服务器 python封装方法 js可以封装方法么 python中封装 java 去重复方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102918.html

从0到1使用VUE-CLI3开发实战（四）: Axios封装

摘要：从到使用开发实战四封装有很多同学看了本系列的前几篇之后建议我暂时先不用，于是小肆之后将把换成继续下面的文章。前置阅读用从到做一个完整功能手机站一从到开发实战手机站二提交规范配置从到使用开发实战三知识储备从0到1使用VUE-CLI3开发实战（四）: Axios封装有很多同学看了本系列的前几篇之后建议我暂时先不用TS，于是小肆之后将把TS换成JS继续下面的文章。今天给大家带来项目中非常...

ThinkSNS 2019-08-23 14:57 评论0 收藏0
基于vue-cli3.0的项目工程重新构建空白版，拿来即用

摘要：写在前面使用框架开发时，很多人会选择官方提供的脚手架，最新的已经更新到完全无配置，只需下载就能方便的使用构建的项目工程，但基础的并不能满足正常的项目开发，在开发中我们需要根据自己的习惯和业务功能而添加些基础功能。写在前面使用vue框架开发时，很多人会选择vue官方提供的cli脚手架，最新的cli已经更新到3.0完全无配置，只需下载就能方便的使用vuecli构建的项目工程，但基础的c...

xingpingz 2019-08-26 10:33 评论0 收藏0
如何更有效率和质量地开发Vue项目

摘要：前言自总结完了上篇前端工程化的思想，并在全家桶的项目加以实践，趁热给大家总结一篇如何更有效率与质量地开发项目，以及其中踩过的一个个坑。。。前言自总结完了上篇前端工程化的思想，并在vue全家桶的项目加以实践，趁热给大家总结一篇如何更有效率与质量地开发vue项目，以及其中踩过的一个个坑。。。基于vue-cli的自定义模板（Custom Templates）小伙伴们的vue项目应该都...

ShevaKuilin 2019-08-20 18:15 评论0 收藏0
vue服务端渲染demo将vue-cli生成的项目转为ssr

摘要：无需使用服务器实时动态编译，而是使用预渲染方式，在构建时简单地生成针对特定路由的静态文件。与可以部署在任何静态文件服务器上的完全静态单页面应用程序不同，服务器渲染应用程序，需要处于运行环境。更多的服务器端负载。目录结构 -no-ssr-demo 未做ssr之前的项目代码用于对比 -vuecli2ssr 将vuecli生成的项目转为ssr -prerender-demo 使用prer...

whinc 2019-08-22 16:07 评论0 收藏0