封装axios(1):http.js

import axios from 'axios'

import Vue from 'vue'

import { Toast } from '../baseUI'

Vue.use(Toast);

// 二次封装axios请求

class Http{

  constructor(){

    // 创建axios实例对象

    this.instance = axios.create(

      // 请求统一进行配置

      {

        baseURL: 'http://localhost:9000/api',

        timeout: 60000,

      }

    );

    this.addResponseInterceptors();

  }

  // 添加响应拦截器的代码

  addResponseInterceptors(){

    this.instance.interceptors.response.use(function (response) {

      if(response.status === 200 && response.data.code === 200){

        return response.data;

      }else{

        // 业务逻辑错误

        //该请求是失败的。

        Toast('请求失败');

        return Promise.reject('网络错误');

      }

    }, function (error) {

      // 服务器响应错误

      // 对响应错误做点什么

      Toast('请求失败');

      return Promise.reject(error);

    });

  }

  get(url, params = {}){

    return this.instance.get(url, {

      params

    });

  }

  post(url, data = {}){

    return this.instance.post(url, data);

  };

}

export default new Http();

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • vue中Axios的封装和API接口的管理 我们所要的说的axios的封装和api接口的统一管理,其实主要目的就是...
    奥雷里亚诺下划线_上校阅读 4,355评论 0 3
  • 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在...
    lan1997阅读 5,169评论 0 1
  • 前言: 在一开始前后台交互过程中,我们一般都是使用传统的ajax进行交互,传统ajax 指的是XMLHttpRe...
    延飞阅读 7,301评论 0 4
  • 一、axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise...
    张先觉阅读 5,765评论 1 12
  • Vue 折腾记 - 给axios做个挺靠谱的封装(报错,鉴权,跳转,拦截,提示) 借鉴引用 本篇文章给大家带来的内...
    MJ_e9a5阅读 5,947评论 0 16

友情链接更多精彩内容