vue请求类的封装，基于jQuery版本和Axios，两个版本

vue中基于jQuery请求类的封装：

/**  * 该插件基于JQuery的基础封装的，使用的时请自配JQuery  * 使用方法:在页面import该JS文件  * XXX.post({··parameter··}).then((response) =>{ success })  */ import Vue from 'vue' import store from '../store' import router from '../router' import message from '../components/toast/message'  let Export = {} let vue = new Vue({router}) Export.post = function (options) { options.method = 'POST'  return Request(options) } Export.get = function (options) { options.method = 'GET'  return Request(options) } Export.put = function (options) { options.method = 'PUT'  return Request(options) } Export.del = function (options) { options.method = 'DELETE'  return Request(options) } const Request = function (options) { let newDef = $.Deferred() store.dispatch('showloader') /**  * @url：请求的接口地址  * @method: 请求方式（GET/POST/PUT/DELETE）  * @param: 请求参数{key:val} (id:'11',name:'name')  * @headers: 请求的headers{key:val} (token:aabbccdd)  * @useCache: 缓存（针对GET方式）  * @skipValidation：跳过验证  */  let url = vue.SERVER_NAME + vue.API_PREFIX + options.url  let method = options.method  let param = options.data || true  let headers = options.headers || true  let useCache = options.cache || true  let skipValidation = !!options.skipValidation;  if (method !== "GET") { param = (typeof param === "string") ? param : JSON.stringify(param) } $.ajax({ url: url,  type: method.toUpperCase(),  dataType: "json",  contentType: "application/json; charset=utf-8",  headers: headers,  data: param,  cache: !!useCache,  success: (data) => { if (skipValidation) { newDef.resolve(data) } else if (handleApiResponseStatus(url, data)) { newDef.resolve(data) } },  error:(request, textStatus) => { handleHttpResponseStatus(url, request.status) } });  /**  * 处理接口响应状态  */  function handleApiResponseStatus(url, data){ console.info('handle Api Response Status Error') if (!data || (!data.codeText)) { console.error(url, data) return false  } if (data.codeText == "RESULT_LOGIN_EXPIRED") { console.info('哎呦喂！登陆超时') message.msg('哎呦喂！登陆超时') return false  } else if (data.codeText == "RESULT_NEED_ADVANCE_AUTH") { console.info('哎呦喂！登陆超时,重新登陆') } else if (data.codeText == "RESULT_NEED_BINDPHONE") { return true  } else if (data.codeText == "FORBIDDEN") { console.info('哎呦喂！权限验证失败') return false  } return true  } /**  * 处理HTTP相应状态  */  function handleHttpResponseStatus(url, status) { console.info('handle Http Response Status Error：' + status) let statu = Number(status) if (statu == 404) { console.info('哎呦喂！我找不到页面') message.msg('哎呦喂！我找不到页面') } else if (statu >= 500) { console.info('哎呦喂！服务器异常') console.info('哎呦喂！服务器异常') } else { console.info('哎呦喂！网络出现异常') console.info('哎呦喂！网络出现异常') } } store.dispatch('hideloader') return newDef.promise() } export default Export 

 

----------------------------------------------------------------------------------------

 

/**  * 该工具类基于axios，请自行安装axios和qs  * npm install axios  * npm install qs  * 该工具类借鉴之前看的一篇博客，后期使用过程中做后续优化  * store是状态管理,这里操作loading，不需要的可删除  */

 

import Vue from 'vue'
import Axios from 'axios'
import Qs from 'qs'
import router from '../router'
import store from '../store'

let vue = new Vue({router})
//请求
Axios.interceptors.request.use( config => {
  store.commit('updateLoading', true)
 return config
}, error => {
  return Promise.reject(error)
})
//请求返回
Axios.interceptors.response.use( response => {
  return response
}, error => {
  return Promise.reject(error.response)
})
//http请求
const Request = (options) => {
  //默认配置项
  let defaultOptions = {
    method: options.method,
    baseURL: vue.SERVER_NAME + vue.API_PREFIX,
    url: options.url,
    timeout: 3000,
    params: Object.assign(options.data),
    data: Qs.stringify(Object.assign(options.data)),
    headers: options.method == 'get' ? {
      'X-Requested-With': 'XMLHttpRequest',
      "Accept": "application/json",
      "Content-Type": "application/json; charset=UTF-8"
    }:{
      'X-Requested-With': 'XMLHttpRequest',
      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    }
  }
  //对get or !get请求处理
  if(options.method == 'get'){
    delete  defaultOptions.data
  } else {
    delete defaultOptions.params
  }

  let promise = new Promise(function (resolve, reject) {
    Axios(defaultOptions).then( (response) =>{
      if (handleApiResponseStatus(response))
      resolve(response.data)
    }).catch((response) => {
      if(handleHttpResponseStatus(response))
      reject(response)
    })
  })
  return promise
}
//处理Http响应状态
function handleHttpResponseStatus(response) {
  store.commit('updateLoading', false)
}
//处理Api响应状态
function handleApiResponseStatus(response) {
  store.commit('updateLoading', false)
}

export default Request

 

//  反向代理  config/index.js

proxyTable: {
    '/api': {    //将www.exaple.com印射为/apis
        target: 'http:',  // 接口域名
        secure: false,  // 如果是https接口，需要配置这个参数
        changeOrigin: true,  //是否跨域
        pathRewrite: {
            '^/api': ''   //需要rewrite的,
        }              
    }
},

使用：

axios.get('http://localhost:xxxx/api/artemis/basicvideo/ptz'

点击链接加入群【ng-vue】：https://jq.qq.com/?_wv=1027&k=52pOebh