ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

VUE2 axios进行封装使用

2021-11-25 11:58:19  阅读:151  来源: 互联网

标签:loading 封装 url token axios VUE2 error response


装好你的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;

来吧使用它
在这里插入图片描述
大概这样子,琢磨琢磨的使用

标签:loading,封装,url,token,axios,VUE2,error,response
来源: https://blog.csdn.net/jiehong1020/article/details/121533917

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有