vue:为项目引入封装的发请求

文件	层级
config.js	api(文件夹) > config.js
urls.js	api(文件夹) > urls.js
http.js	api(文件夹) > http.js
http-ie.js	api(文件夹) > http-ie.js
mixin.js	tools(文件夹) > mixin.js
des.js	tools(文件夹) > des.js
main.js	main.js

• config.js 接口基准地址

// export const baseURL = 'http://192.168.1.99:9005/api/'
// export const baseURL = 'http://112.16.90.123:9005/api/'
// export const baseURL = 'http://114.215.186.169:8193/api/'
export const imgBaseURL = 'http://114.215.186.169:8195/'
// axios发请求默认会拼接基础的baseURL
export const baseURL = 'http://api.suotuobao.com/api/' // 线上接口
export const timeout = 30000
export const applicationKey = 'bkkj'

• urls.js 接口地址

export const getApplication = 'application/' // 获取应用信息

export const getVerificationCode = 'Sms/Sms/' // 获取短信验证码
// export const passwordLogin = 'Login/GJUserLogin' // 帐号密码登录
export const passwordLogin = 'Login/UserLogin' // 帐号密码登录
// export const telLogin = 'Login/GJSmsUserLogin' // 手机号验证码登录
export const telLogin = 'Login/SmsUserLogin' // 手机号验证码登录
export const resetPassword = 'Login/FindPwd' // 重置密码

export const getUserInfoByTel = 'User/UserInfoTel/' // 通过手机号获取用户信息
export const getUserInfoByOpenId = 'User/UserInfoOpenid/' // 通过openId获取用户信息（微信专用）

• http.js 封装的请求文件

// vue 公用的api （插件： js-cookie）
import Axios from 'axios'
import VueRouter from 'vue-router'
import { baseURL, timeout, applicationKey } from './config'
import { getIE, postIE } from './http-ie'
// isLTIE判断ie版本  encryptDes中crypto-js对接口授权字段进行加密
import { isLTIE } from '@/tools/mixin'
import { encryptDes } from '@/tools/des'
// js-cookie中encode()编码decode()解码
import Cookies from 'js-cookie'
import { Base64 } from 'js-base64'

Axios.defaults.timeout = timeout
Axios.defaults.baseURL = baseURL

Axios.interceptors.request.use(
  config => {
    // 请求拦截器：config对象有headers字段，baseURL请求的基准地址，接口请求完整地址url字段，配置的超时字段timeout字段
    // 一：原理(为请求添加token)：在请求拦截器里判断，如果获取到token,为config.headers添加Authorization字段
    // 开始

    // 结束
    // 二：原理(为不同的接口添加不同的验证): 通过config.url.indexOf()判断接口，为指定的接口添加未登录接口授权，其它接口授权
    let authorization = {}
    if (config.url.indexOf('application/') === 0) {
      // A不需要授权
      console.log(' ')
    } else if (
      config.url.indexOf('Sms/Sms/') === 0 ||
      config.url.indexOf('Login/UserLogin') === 0 ||
      config.url.indexOf('Login/SmsUserLogin') === 0 ||
      config.url.indexOf('Login/FindPwd') === 0
    ) {
      // B未登陆接口授权
      let application = JSON.parse(Cookies.get('application'))
      authorization = {
        Authorization:
          'Basic ' +
          Base64.encode(
            application.name +
              ':' +
              encryptDes(
                config.baseURL + config.url,
                applicationKey + application.key,
                applicationKey + application.iv
              )
          )
      }
    } else {
      // C其它的授权
      // 授权失败
      if (!Cookies.get('access_token')) {
        // this.$toast('授权失效，请重新登录')
        VueRouter.replace('/login')
      }
      authorization = {
        Authorization: 'Bearer ' + Cookies.get('access_token')
      }
    }

    // 授权字段
    config.headers = Object.assign(
      // 后端通常会希望获取到json格式的数据,所以通常请求的headers里要设置content-type:application/json
      {
        'Content-Type': 'application/json'
      },
      authorization
    )
    return config
  },
  err => {
    return Promise.reject(err)
  }
)

// http response 拦截器
Axios.interceptors.response.use(
  response => {
    return response
  },
  error => {
    return Promise.reject(error)
  }
)

export function get(url, params = {}) {
  if (isLTIE(10)) {
    return getIE(baseURL + url, params)
  } else {
    return new Promise((resolve, reject) => {
      Axios.get(url, {
        params: params
      })
        .then(res => {
          resolve(res)
        })
        .catch(err => {
          reject(err)
        })
    })
  }
}

export function post(url, data = {}, config = {}) {
  if (isLTIE(10)) {
    return postIE(baseURL + url, data)
  } else {
    return new Promise((resolve, reject) => {
      Axios.post(url, data, config)
        .then(res => {
          resolve(res)
        })
        .catch(err => {
          reject(err)
        })
    })
  }
}

• http-ie.js

export function getIE(url, params) {
  return new Promise((resolve, reject) => {
    if (window.XDomainRequest) {
      var str = ''
      if (Object.prototype.toString.call(params) === '[object Object]') {
        for (var key in params) {
          str += '&' + key + params.key
        }
        str = '?' + str.substr(1)
      }
      url += str
      // eslint-disable-next-line
      var xdr = new XDomainRequest()
      xdr.open('GET', url)

      xdr.onprogress = function() {}
      xdr.ontimeout = function() {
        alert('请求超时')
        reject(new Error())
      }
      xdr.onerror = function() {
        alert('请求出错')
        reject(new Error())
      }
      xdr.onload = function() {
        resolve({ data: JSON.parse(xdr.responseText) })
      }
      setTimeout(function() {
        xdr.send()
      }, 0)
    } else {
      alert('该浏览器不支持XDomainRequest请求，请换用其它浏览器')
      reject(new Error())
    }
  })
}

export function postIE(url, params) {
  return new Promise((resolve, reject) => {
    if (window.XDomainRequest) {
      var str = ''
      if (Object.prototype.toString.call(params) === '[object Object]') {
        for (var key in params) {
          str += '&' + key + params.key
        }
        str = '?' + str.substr(1)
      }
      // eslint-disable-next-line
      var xdr = new XDomainRequest()
      xdr.open('POST', url)

      xdr.onprogress = function() {}
      xdr.ontimeout = function() {
        alert('请求超时')
        reject(new Error())
      }
      xdr.onerror = function() {
        alert('请求出错')
        reject(new Error())
      }
      xdr.onload = function() {
        resolve({ data: JSON.parse(xdr.responseText) })
      }

      setTimeout(function() {
        xdr.send(str)
      }, 0)
    } else {
      alert('该浏览器不支持XDomainRequest请求，请换用其它浏览器')
      reject(new Error())
    }
  })
}

• mixin.js

export function isLTIE(v) {
  if (
    window.navigator.appName === 'Microsoft Internet Explorer' &&
    parseInt(
      window.navigator.appVersion
        .split(';')[1]
        .replace(/[ ]/g, '')
        .replace('MSIE', '')
    ) < v
  ) {
    return true
  }
  return false
}

• des.js 加密接口地址

import cryptoJs from 'crypto-js'

// DES加密
export const encryptDes = (message, key, iv) => {
  var keyHex = cryptoJs.enc.Utf8.parse(key)
  var ivHex = cryptoJs.enc.Utf8.parse(iv)
  var encrypted = cryptoJs.DES.encrypt(message, keyHex, {
    iv: ivHex,
    mode: cryptoJs.mode.CBC,
    padding: cryptoJs.pad.Pkcs7
  })
  return encrypted.toString()
}

---

---

1. main.js 部分配置代码

// 配置axios
Vue.prototype.$get = get
Vue.prototype.$post = post

2. 页面中发请求

// 按需导入请求地址
import { getAllCraftsman } from '@/api/urls'