vue请求的封装_vue封装请求

首先是对于请求的拦截和处理，我一般是在utils里建立js进行封装

Servise.js

import axios from 'axios'
import router from '../router'
import { Message, Loading } from 'element-ui'
import { Base64 } from 'js-base64';
import AES from '../static/AES.js'
import md5 from 'js-md5';
// export const ConfigBaseURL = 'http://请求头' //默认路径，这里也可以使用env来判断环境
let loadingInstance = null //这里是loading
//使用create方法创建axios实例
export const Service = axios.create({
  timeout: 30000, // 请求超时时间
  method: 'post',
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
})
// request拦截器
Service.interceptors.request.use(
  config => {
    loadingInstance = Loading.service({
      lock: true,
      text: 'loading...',
      background:'transparent'
    })
      if (sessionStorage.getItem('token')) {
          config.headers['X-Access-Token'] = sessionStorage.getItem('token') // 让每个请求携带自定义token 请根据实际情况自行修改
        }
        if(config.data){
          config.headers['M-RAND'] = new Date().toLocaleString();
          config.headers['M-SIGN'] = md5(config.headers['M-RAND']+"简单字符串"+Base64.encode(JSON.stringify(config.data))).toUpperCase();
        }
      return config;
  },
  error => {
      // 请求错误处理
      return Promise.reject(error);
  }
)
var lateFlag = 0;
 
// 添加响应拦截器
Service.interceptors.response.use(response => {
  loadingInstance.close()
 
  response.data = Base64.decode(response.data);
  response.data = response.data.split('').reverse().join('');
  if (response.data.length > 24) {
    let rand = response.data.substring(8, 24);
    response.data = response.data.substring(0, 8) + response.data.substring(24);
    return JSON.parse(AES.myDecrypt(response.data, rand));
  } else {
    let rand = response.data.substring(response.data.length - 16);
    response.data = response.data.substring(0, response.data.length - 16);
    return JSON.parse(AES.myDecrypt(response.data, rand));
  }
  // return response.data
}, error => {
  console.log('error',error);
  if (error.response.status == 504 || error.response.status == 404) {
    Message.error({message: '数据获取异常'});
} else if (error.response.status == 403) {
    Message.error({message: '权限不足，请联系管理员！'});
} else if (error.response.status == 401) {
  lateFlag++;
  if(lateFlag==1){
    // this.$confirm('Token失效,请重新登录','',{
    //   confirmButtonText:'确定',
    //   cancelButtonText:'取消',
    // }).then(res=>{
    //   console.log('点击了确定');
    // }).catch(res=>{
    //   console.log('点击了取消');
    // })
    Message.error({message: 'Token失效，请重新登录'});
  }
  router.replace('/');
 
    
} else {
    if (error.message) {
        Message.error({message: error.message});
    } else {
        Message.error({message: '未知错误！'});
    }
}
  loadingInstance.close()
  return Promise.reject(error)
})

然后就可以封装一些简单的请求

request.js

import {Service} from './Service'
 
export function getAction(url,data) {
  return Service({
    url: url,
    method: 'get',
    params:data
  })
}
export function postAction(url,data) {
  return Service({
    url: url,
    method:'post',
    data: data
  })
}
export function deleteAction(url,data) {
  return Service({
    url: url,
    method:'delete',
    params: data
  })
}

在main.js绑定即可使用

import { Service } from './utils/Service.js'
 
import { Base64 } from 'js-base64';
Vue.prototype.$Base64 = Base64
 
import { getAction, postAction,deleteAction } from './utils/request.js'
Vue.prototype.$request = Service
Vue.prototype.$getAction = getAction
Vue.prototype.$postAction = postAction
Vue.prototype.$deleteAction = deleteAction

在页面使用时建议使用异步封装调用

//请求函数
 getlist() {
            return new Promise((resolve, reject) => {
                this.$postAction("请求地址", {sex:0}).then((res) => {
                    if (res.success) {
                        resolve(res.result.data)
                    }
                });
            })
        },
//使用调用函数
  setdata() {
            this.getAnalysis().then(res => {
                console.log(res)
    })