Vue 网路请求组件 ,利用Axios

对于网络请求,由于在每一次请求时都需要判断各种异常情况,然后提示用户,例如请求是否成功,失败的原因等,

考虑到这些判断基本上都是重复的代码,因次可以将网络请求封装,做成vue插件方便使用.

 

首先要安装Element和Axios依赖:

npm i element-ui -S

npm i axios -S

 

然后创建一个api.js文件

代码如下:

import axios from 'axios'
import {Message} from 'element-ui'

axios.interceptors.request.use(config => {
  return config;
}, err => {
  Message.error({message: '请求超时!'});
  // return Promise.resolve(err);
})
axios.interceptors.response.use(data => {
  if (data.status && data.status == 200 && data.data.status == 500) {
    Message.error({message: data.data.msg});
    return;
  }
  if (data.data.msg) {
    Message.success({message: data.data.msg});
  }
  return data;
}, err => {
  if (err.response.status == 504 || err.response.status == 404) {
    Message.error({message: '服务器被吃了⊙﹏⊙∥'});
  } else if (err.response.status == 403) {
    Message.error({message: '权限不足,请联系管理员!'});
  } else if (err.response.status == 401) {
    Message.error({message: err.response.data.msg});
  } else {
    if (err.response.data.msg) {
      Message.error({message: err.response.data.msg});
    }else{
      Message.error({message: '未知错误!'});
    }
  }
  // return Promise.resolve(err);
})
let base = '';
export const postRequest = (url, params) => {
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    transformRequest: [function (data) {
      let ret = ''
      for (let it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }],
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  });
}
export const uploadFileRequest = (url, params) => {
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  });
}
export const putRequest = (url, params) => {
  return axios({
    method: 'put',
    url: `${base}${url}`,
    data: params,
    transformRequest: [function (data) {
      let ret = ''
      for (let it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }],
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  });
}
export const deleteRequest = (url) => {
  return axios({
    method: 'delete',
    url: `${base}${url}`
  });
}
export const getRequest = (url) => {
  return axios({
    method: 'get',
    url: `${base}${url}`
  });
}

接下来在main.js中引入Element和上面封装的api.js
代码如下

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import {getRequest} from './utils/api';
import {postRequest} from './utils/api';
import {deleteRequest} from './utils/api';
import {putRequest} from './utils/api';
import {initMenu} from './utils/utils';

Vue.use(ElementUI)
#将方法配置为vue的prototype 
Vue.prototype.getRequest=getRequest;
Vue.prototype.postRequest=postRequest;
Vue.prototype.deleteRequest=deleteRequest;
Vue.prototype.putRequest=putRequest;
Vue.prototype.isNotNullORBlank =isNotNullORBlank;

配置完成后,接下来对于任何需要使用网络请求的地址,都可以使用this.XXX执行一个网络请求,
例如要执行登录请求,就可以通过this.postRequest(url,param)执行

转载于:https://www.cnblogs.com/MrEcho/p/11491732.html