vue-request-package

2019-08-21

封装接口请求，以vue为例

首先配置代理

查看 https://caijuan02.github.io/2019/08/21/vue-proxy/#more

为了更方便，将自己定义的文件夹统一放在script文件夹下, 在根目录下创建script文件夹
新增 script/config/index.js

export default {
  /**
   * @description 配置显示在浏览器标签的title
   */
  title: "派对圈智能婚恋管理云平台",
  /**
   * @description token在Cookie中存储的天数，默认1天
   */
  cookieExpires: 1,
  /**
   * @description 是否使用国际化，默认为false
   *              如果不使用，则需要在路由中给需要在菜单中展示的路由设置meta: {title: 'xxx'}
   *              用来在菜单中显示文字
   */
  useI18n: true,
  /**
   * @description api请求基础路径
   */
  baseUrl: {
    dev: "/api",   //这里的/api就是配置代理后的
    pro: "/"
  },
  /**
   * @description 默认打开的首页的路由name值，默认为home
   */
  homeName: "home",
  /**
   * @description 需要加载的插件
   */
  plugin: {
    "error-store": {
      showInHeader: true, // 设为false后不会在顶部显示错误日志徽标
      developmentOff: true // 设为true后在开发环境不会收集错误信息，方便开发中排查错误
    }
  }
};

封装axios.js 新建 script/utils/axios.js

import axios from 'axios'
// import store from '@/store'
// import router from "vue-router"
axios.defaults.withCredentials = true
// 让ajax携带cookie
// import { Spin } from 'iview'
const addErrorLog = errorInfo => {
  // const { statusText, status, request: { responseURL } } = errorInfo
  // let info = {
  //   type: 'ajax',
  //   code: status,
  //   mes: statusText,
  //   url: responseURL
  // }
  // if (!responseURL.includes('save_error_logger')) store.dispatch('addErrorLog', info)
}

class HttpRequest {
  constructor (baseUrl) {
    this.baseUrl = baseUrl
    this.queue = {}
  }
  getInsideConfig () {
    const config = {
      baseURL: this.baseUrl,
      headers: {
        //
      }
    }
    return config
  }
  destroy (url) {
    delete this.queue[url]
    if (!Object.keys(this.queue).length) {
      // Spin.hide()
    }
  }
  interceptors (instance, url) {
    // 请求拦截
    instance.interceptors.request.use(config => {
      // 添加全局的loading...
      if (!Object.keys(this.queue).length) {
        // Spin.show() // 不建议开启，因为界面不友好
      }
      this.queue[url] = true
      return config
    }, error => {
      return Promise.reject(error)
    })
    // 响应拦截
    instance.interceptors.response.use(res => {
      // const LOGIN_PAGE_NAME = 'login'
      if (res.data.errorcode === 80001) {
        // window.hyVue.$router.push({ path: '/login' })
        // window.location.href = '/manage/#/login'
      }
      this.destroy(url)
      const { data, status } = res
      return { data, status }
    }, error => {
      // this.$Message.error('网络错误，请重试')
      this.destroy(url)
      let errorInfo = error.response
      if (!errorInfo) {
        const { request: { statusText, status }, config } = JSON.parse(JSON.stringify(error))
        errorInfo = {
          statusText,
          status,
          request: { responseURL: config.url }
        }
      }
      addErrorLog(errorInfo)

      let ret = error && error.response && error.response.data && error.response.data.ret
      if (ret === 1) {
        let status = error && error.response && error.response.status
        let statusText = error && error.response && error.response.statusText
        let reData = error && error.response && error.response.data && error.response.data
        error.err = {
          status: status,
          statusText: statusText,
          data: reData
        }
      }

      return Promise.reject(error)
    })
  }
  request (options) {
    const instance = axios.create()
    options = Object.assign(this.getInsideConfig(), options)
    this.interceptors(instance, options.url)
    return instance(options)
  }
}
export default HttpRequest

新建 script/utils/api.request.js

import HttpRequest from "@/script/utils/axios";
import config from "@/script/config";
const baseUrl =
  process.env.NODE_ENV === "development"
    ? config.baseUrl.dev
    : config.baseUrl.pro;

const axios = new HttpRequest(baseUrl);
export default axios;

封装完后就可以定义每个接口了
新建 script/io/test.js

import axios from "@/script/utils/api.request";

export const qrcodescenicDetail = params => {
  return axios.request({
    url: "/test/app/activity/qrcodescenic/detail",
    params: params,
    method: "get",
    withCredentials: false
  });
};

使用接口
在页面中导入

import { qrcodescenicDetail } from "@/script/io/test";
initdata(id) {
    let data = {
      id: id
    };
    qrcodescenicDetail(data)
      .then(res => {
        if (res.data.ret == 0) {
          this.detailData = res.data.data;
        } else {
          this.$Message.error(res.data.msg);
        }
      })
      .catch(error => {
        window.console.log(error);
      });
  },