VUE2 axios进行封装使用

装好你的axios 和element-ui 上车
创建request.js文件

token放请求头Authorization这里request给后端,后端也会response回来Authorization携带token,这里看自己需不需要vuex 定义token,根据自己的需求哈

import axios from "axios";
import store from '../../store/index';
import {Loading,Notification} from 'element-ui';
var _that=this;

//请求头
//axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';  //此处是增加的代码,设置请求头的类型
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  timeout: 50000 // request timeout
})

// 请求拦截器
axios.interceptors.request.use(
  config => {
    //登陆凭证
    //拼接bearer
    var token='bearer '+store.state.token;
    // 每次发送请求之前判断是否存在token
    // 如果存在,则统一在http请求的header都加上token,这样后台根据token判断你的登录情况,此处token一般是用户完成登录后储存到localstorage里的
    config.headers.Authorization = token?token:"";
    return config
  },
  error => {
    return Promise.error(error)
})

// 响应拦截器
axios.interceptors.response.use(response => {
  // 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据
  // 否则的话抛出错误
  if (response.status === 200) {
    if (response.data.code === 511) {
      // 未授权调取授权接口
    } else if (response.data.code === -201) {
      //弹窗提示
      Notification.error("登陆过期");
      //登陆凭证过期跳回登陆页面
      setTimeout(()=>{
        _that.$router.push({ name: 'login'});
      },2000)
      // 未登录跳转登录页
    } else {
      //获取登陆接口请求头的登陆凭证
      var token=response.headers.authorization;
      if(token){
        //截取掉bearer
        token=token.substring(7,token.length);
        store.commit('token',token);
        window.localStorage.setItem("token",token);
        //存储cookie
        if(document.cookie){
          document.cookie="token="+token;
        }
      }else{
        console.error("接口response请求头部没有返回authorization")
      }
      return Promise.resolve(response)
    }
  } else {
    return Promise.reject(response)
  }
}, error => {
  // 我们可以在这里对异常状态作统一处理
  if (error.response.status) {
    if(error.status != 200){
      //弹窗提示
      // Notification.error("服务器异常");
      console.error(error.response);
    }
    // 对不同返回码对相应处理
    // 处理请求失败的情况
    return Promise.reject(error.response)
  }
})

let loadinginstace; //load加载
// get 请求
export function httpGet({url, params = {},loading}) {
  if(loading){
    loadinginstace = Loading.service({fullscreen: true}) // 请求打开loading
  }
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params
    }).then((res) => {
      //关闭loading
      if(loading){
        loadinginstace.close();
      }
      resolve(res)
    }).catch(err => {
      //关闭loading
      if(loading){
        loadinginstace.close();
      }
      reject(err)
    })
  })
}
// post请求
export function httpPost({url,data = {},params = {},loading}) {
  if(loading){
    loadinginstace = Loading.service({fullscreen: true}) // 请求打开loading
  }
  return new Promise((resolve, reject) => {
    axios({
      url:url,
      method: 'post',
      transformRequest: [function (data) {
        let ret = ''
        for (let it in data) {
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
      }],
      // 发送的数据
      data,
      // url参数
      params
    }).then(res => {
      //关闭loading
      if(loading){
        loadinginstace.close();
      }
      resolve(res);
    }).catch(res=>{
      resolve(res);
      //关闭loading
      if(loading){
        loadinginstace.close();
      }
    })
  })
}
//请求发送文件url路径 file_list 文件列表,loading弹窗
export function httpPost_file({url,file_list,filetype,loading}){
  if(loading){
    loadinginstace = Loading.service({fullscreen: true}) // 请求打开loading
  }
  return new Promise((resolve, reject) => {
    let formData = new FormData();
    for (let i = 0; i <file_list.length ; i++) {
      formData.append("file[]",file_list[i],file_list[i].name);
    }
    //文件类型
    formData.append("filetype",filetype);
    const config = {
      headers: { "Content-Type": "multipart/form-data;boundary="+new Date().getTime() }
    };
    axios.post(url,formData,config)
      .then(function (res) {
        resolve(res);
        //关闭loading
        if(loading){
          loadinginstace.close();
        }
      })
      .catch(function (error) {
        //关闭loading
        if(loading){
          loadinginstace.close();
        }
        reject(error);
      });
  })
}
export default {httpGet,httpPost,httpPost_file}

main.js 挂载它

import request from “./common/js/request”;//请求(注意自己的request文件路径)
Vue.prototype.$http = request;

来吧使用它
VUE2 axios进行封装使用
大概这样子,琢磨琢磨的使用

上一篇:vue中使用axios


下一篇:Vue3学习与实战 · 全局挂载使用Axios