vue请求封装 使用promise和vue-resource

vue请求封装 使用promise和vue-resource

由于在项目中很多地方都需要用到网络请求，为了使用上的方便，使用ES6的Promise和vue-resource来封装网络请求

// # api.js
import Vue from 'vue';
import router from '../../router';
const API_PATH = '' // # 请求前缀
/**
 * @param  {string} {url 请求地址
 * @param  {string} method 请求方法
 * @param  {Object} params body请求参数
 * @param  {Function} before 发送请求前执行方法
 * @param  {string} prefix 请求地址前缀
 */
function http({
  url,
  method = 'get',
  params = {},
  before = function (request) {
  },
  prefix = API_PATH
}) {
  url = prefix + url;
  return new Promise((resolve, reject) => {
    Vue.http[method](
      url, method == 'get' ? {
        params,
        before,
      } : params, {
        emulateJSON: true
      },
    ).then((res) => {
      resolve(res.data);
    }).catch(res => {
      console.log('warn');
      // 统一处理异常情况
      if (res.status == 500) {
        // 跳转注册页
        router.push('/register');
      }
    });
  })
}
复制代码

params的处理方法get和post有所不同，get中params是作为请求的query，post中的是作为请求的body

基于全局Vue对象使用http

Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
复制代码

before()是发送请求前执行的方法

// # 调用示例 get before
_getPackageList() {
  http({
    url: HTTP_URL.getPackageList,
    params: {
      city_id: this.currentCity.city_id,
      company_id: 0,
      list: 0,
      name: this.$route.query.package_name 
    },
    // # 请求前先中止上一个请求，防止多次请求
    before(request) {
      this.prevRequest && this.prevRequest.abort();
      this.prevRequest = request;
    },
    prefix: appPath
  }).then(res => {
    if (res.code === 200) {
    // # 处理数据 
    }
  });
},
// post
http({
  url: HTTP_URL.saveMemeber,
  params: {..},
  method: "post",
  prefix: appPath
}).then(res => {
  if (res.code === 200) {
  // # 保存成功
  }
});
复制代码

转载于:https://juejin.im/post/5badf8356fb9a05d02610078