vue+ts下对axios的封装实现


Posted in Javascript onFebruary 18, 2020

虽然vue中axios的使用已经十分方便,但是实际我们的日常操作中可能为了接口的规则一致,来创建一个统一管理的全局方法达到简化操作.而且在实际接口对接中,我们大多都需要对请求和响应进行拦截来进行token以及回调状态码的处理.那么我基于自己的需求简单分装了一下.(之前很少接触vue,主要用的ng和react,这次新项目想用vue来弄,熟悉一下vue的一些新特性和方法,有啥不对的,欢迎大家批评指正)
前提: 熟悉前端ts, node等等.

1. 安装axios

npm install axios -D

2. 拦截器及全局方法编写

一个http.ts文件进行自己http逻辑的封装,为了代码分离,我同时创建interceptors.ts文件进行拦截器逻辑,放在一起也行.

interceptors.ts(拦截器,进行请求和响应拦截并进行部分逻辑处理)

import axios from 'axios';
  import {message} from 'ant-design-vue'; // 这是我引入的antd的组件库,为了方便弹出吐司
  
  export class Interceptors {
    public instance: any;
  
    constructor() {
      // 创建axios实例
      this.instance = axios.create({timeout: 1000 * 12});
      // 初始化拦截器
      this.initInterceptors();
    }
    
    // 为了让http.ts中获取初始化好的axios实例
    public getInterceptors() {
      return this.instance;
    }
  
  
    // 初始化拦截器
    public initInterceptors() {
      // 设置post请求头
      this.instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
      /**
      * 请求拦截器
      * 每次请求前,如果存在token则在请求头中携带token
      */
      this.instance.interceptors.request.use(
        (config) => {
          // 登录流程控制中,根据本地是否存在token判断用户的登录情况
          // 但是即使token存在,也有可能token是过期的,所以在每次的请求头中携带token
          // 后台根据携带的token判断用户的登录情况,并返回给我们对应的状态码
          if (config.headers.isJwt) {
            const token = localStorage.getItem('id_token');
            if (token) {
              config.headers.Authorization = 'Bearer ' + token;
            }
          }
          return config;
        },
        (error) => {
          console.log(error);
        },
      );
  
  
      // 响应拦截器
      this.instance.interceptors.response.use(
        // 请求成功
        (res) => {
          if (res.headers.authorization) {
            localStorage.setItem('id_token', res.headers.authorization);
          } else {
            if (res.data && res.data.token) {
              localStorage.setItem('id_token', res.data.token);
            }
          }
  
          if (res.status === 200) {
            return Promise.resolve(res.data);
          } else {
            this.errorHandle(res);
            return Promise.reject(res.data);
          }
        },
        // 请求失败
        (error) => {
          const {response} = error;
          if (response) {
            // 请求已发出,但是不在2xx的范围
            this.errorHandle(response);
            return Promise.reject(response.data);
          } else {
            // 处理断网的情况
            // eg:请求超时或断网时,更新state的network状态
            // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
            // 关于断网组件中的刷新重新获取数据,会在断网组件中说明
            message.warn('网络连接异常,请稍后再试!');
          }
        });
    }
  
  
    /**
    * http握手错误
    * @param res 响应回调,根据不同响应进行不同操作
    */
    private errorHandle(res: any) {
      // 状态码判断
      switch (res.status) {
        case 401:
          break;
        case 403:
          break;
        case 404:
          message.warn('请求的资源不存在');
          break;
        default:
          message.warn('连接错误');
      }
    }
  }

http.ts(http封装,自己根据实际情况处理)

/**
 * @author keiferju
 * @time  2019-08-29 12:57
 * @title  http请求封装
 * @desc
 *
 */
import {Interceptors} from '@/service/interceptors';
import {message, Modal} from 'ant-design-vue';  // 弹吐司
import router from '../router';

export class HttpService {
  public axios: any;
  public modal: any;

  constructor() {
      // 获取axios实例
    this.axios = new Interceptors().getInterceptors();
  }


  /**
   * get请求
   * @param params 参数
   * @param jwt  是否token校验
   * @param modulename  模块
   * @param operation   接口
   * @param flag     标记
   * @param verson    版本,默认1.0.0
   * @param service   服务,默认services
   */
  public getData(params: object, jwt: boolean, modulename: string, operation: string,
          flag: string, verson = '1.0.0', service = 'services') {

    const url = service + '/' + verson + '/' + modulename + '/' + operation;
    const body = {
      parameter: {
        data: params,
        tag: flag,
      },
    };

    return new Promise((resolve, reject) => {
      this.axios.get(url, {
        params: body,
        headers: {isJwt: jwt},
      }).then((res) => {
        this.resultHandle(res, resolve);
      }).catch((err) => {
        reject(err.message);
      });
    });

  }


  /**
   * post请求
   * @param params 参数
   * @param jwt  是否token校验
   * @param modulename  模块
   * @param operation   接口
   * @param flag     标记
   * @param verson    版本,默认1.0.0
   * @param service   服务,默认services
   */
  public postData(params: object, jwt: boolean, modulename: string, operation: string,
          flag: string, verson = '1.0.0', service = 'services') {
    const url = service + '/' + verson + '/' + modulename + '/' + operation;
    const body = {
      data: params,
      tag: flag,
    };
    return new Promise((resolve, reject) => {
      this.axios.post(url, body, {
        headers: {isJwt: jwt},
      }).then((res) => {
        this.resultHandle(res, resolve);
      }).catch((err) => {
        reject(err.message);
      });
    });

  }


  /**
   *
   * @param res
   * @param resolve
   */
  public resultHandle(res: any, resolve) {
    if (res.status > 0) {
      resolve(res.data);
    } else {
      this.errorHandle(res);
    }
  }


  /**
   * 服务端状态处理,例如中断性异常,退出异常等等(与拦截器http握手状态注意区分,一般都能分清楚吧)
   * @param res
   */
  public errorHandle(res: any) {
    message.warn(res.msg); // 统一谈服务端提示,我们提示统一由服务端提供
    // 状态码判断
    switch (res.status) {
      case -102: 
         break;
      case -152:
        break;
      default:
      // console.log(other);
    }
  }

}

3. 挂载

我们定义好拦截器,那么就得把他挂载全局,能让我们方便使用.

main.ts

import Vue from 'vue';
import App from './App.vue';
import HighchartsVue from 'highcharts-vue';

Vue.config.productionTip = false;

Vue.prototype.$httpService = new HttpService(); // 挂载服务

new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app');

4. ts桥连(也不知道怎么称呼,自己从ng时就一直这么称呼)

行完上一步一定会发现报错啊,$httpService是个啥,不存在啊,这是因为ts的特性导致.

main.ts的同级目录创建一个xx.d.ts文件.

import {HttpService} from './service/http';
  
declare module 'vue/types/vue' {
  interface Vue {
    $httpService: HttpService;
  }
}

5. 使用

在其它组件中使用,直接用this调用,不用再去引用,但是小心在某个this指向变了的回调中使用时找不到,至于怎么怎么解决应该都懂.

this.$httpService.postData({}, true, 'execute', 'xxx', 'tag').then((result) => {
       // doing      
}, (error) => {
   console.log(error);
});

最后:这是在ts下的封装,js的话更简单点,甚至应该会更简单点(会少一些步骤,网上教程应该很多).挂载http工具的方式平时也适合我们定义全局工具类或者服务.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
初学Javascript的一些总结
Nov 03 Javascript
JavaScript中instanceof运算符的用法总结
Nov 19 Javascript
jquery实现多行文字图片滚动效果示例代码
Oct 10 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
Oct 23 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
Apr 13 Javascript
JavaScript注册时密码强度校验代码
Jun 30 Javascript
React-Native 组件之 Modal的使用详解
Aug 08 Javascript
vue.js打包之后可能会遇到的坑!
Jun 03 Javascript
JS module的导出和导入的实现代码
Feb 25 Javascript
Django模板继承 extend标签实例代码详解
May 16 Javascript
tweenjs缓动算法的使用实例分析
Aug 26 Javascript
ES6中Promise的使用方法实例总结
Feb 18 #Javascript
React中获取数据的3种方法及优缺点
Feb 18 #Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 #Javascript
JavaScript canvas绘制折线图
Feb 18 #Javascript
node+multer实现图片上传的示例代码
Feb 18 #Javascript
JavaScript canvas绘制圆弧与圆形
Feb 18 #Javascript
javascript中的with语句学习笔记及用法
Feb 17 #Javascript
You might like
论坛头像随机变换代码
2006/10/09 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
CL vs ForZe BO5 第四场 2.13
2021/03/10 DOTA
表单填写时用回车代替TAB的实现方法
2007/10/09 Javascript
基于jquery的9行js轻松实现tab控件示例
2013/10/12 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
javascript的几种写法总结
2016/09/30 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
2017/05/11 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
2019/07/19 Javascript
微信小程序使用车牌号输入法的示例代码
2019/08/20 Javascript
vue-router 按需加载 component: () => import() 报错的解决
2020/09/22 Javascript
[59:44]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 paiN vs iG
2018/03/31 DOTA
Python抓取京东图书评论数据
2014/08/31 Python
python开发之基于thread线程搜索本地文件的方法
2015/11/11 Python
Python使用Django实现博客系统完整版
2020/09/29 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
python将四元数变换为旋转矩阵的实例
2019/12/04 Python
python groupby 函数 as_index详解
2019/12/16 Python
postman和python mock测试过程图解
2020/02/22 Python
PyCharm Anaconda配置PyQt5开发环境及创建项目的教程详解
2020/03/24 Python
jupyter 使用Pillow包显示图像时inline显示方式
2020/04/24 Python
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
英国优质家居用品网上品牌:URBANARA
2018/06/01 全球购物
西班牙灯具网上商店:Lampara.es
2018/06/05 全球购物
前台文员岗位职责
2013/12/28 职场文书
大学生自助营养快餐店创业计划书
2014/01/13 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
运动会通讯稿600字
2015/07/20 职场文书
大学班干部竞选稿
2015/11/20 职场文书
ubuntu安装jupyter并设置远程访问的实现
2022/03/31 Python
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL
Navicat Premium自定义 sql 标签的创建方式
2022/09/23 数据库