封装axios，带请求头和响应头

最新推荐文章于 2024-07-24 15:30:34 发布

转载最新推荐文章于 2024-07-24 15:30:34 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/tlfe/p/11911915.html

Vue 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了在Vue项目中如何封装Axios库，实现请求与响应的全局拦截，包括加载动画、错误处理及token验证。通过具体代码示例，展示了如何在main.js中引入并挂载到Vue原型，以便在整个应用中便捷地调用。

import axios from "axios";
import qs from "qs"; //处理参数
import router from '../router';
import { Loading } from 'element-ui';
import { Message } from 'element-ui';

let loading = null;

//开始加载动画

function openLoading(){
  loading = Loading.service({
    lock:true,
    text:'拼命加载中...',
    background:'rgba(0,0,0,.7)'
  });
}

//关闭加载动画

function closeLoading(){
  loading.close();
}

//添加请求拦截器

axios.interceptors.request.use(
  config => {
    //加载动画
    openLoading()
    if(localStorage.sessionId){ //如果我的sessionId存在(sessionId其实就是token)
      // 设置统一的请求header
      config.headers.Authorization = localStorage.sessionId //授权（每次请求把sessionId带给后台）
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

//添加响应拦截器

axios.interceptors.response.use(
  response => {
    closeLoading()//关闭加载动画
    if(response.data.errorCode == -1){ //后端反回的状态值，本应该errorCode是status
      Message({
        type:'warning',
        duration:1500,
        showClose: true,
        message:'当前登录已失效，请从新登录！'
      })
      localStorage.removeItem("sessionId")//清除sessionId
      localStorage.removeItem("username")//清除username
      localStorage.removeItem("modules")//清除权限
      router.push("/logon")//让用户从新回到登录页面
    }
    return response;
  },
  error => {
    closeLoading() // 关闭加载动画
    return Promise.resolve(error.response);
  }
);

// axios.defaults.baseURL = "http://10.26.4.18:8080/neixuan"; // 测试
axios.defaults.baseURL = "http://10.26.4.18:8081/neixuan";    // 开发
// axios.defaults.baseURL = "https://xxxxxxxx.com/neixuan"; // 线上

axios.defaults.headers.post["Content-Type"] = "application/json";
axios.defaults.headers.post["X-Requested-With"] = "XMLHttpRequest";
axios.defaults.timeout = 6000; //设置请求超时时间

function checkStatus(response) {
  return new Promise((resolve, reject) => {
    if(response && (response.status === 200 || response.status === 304 || response.status === 400)){
      resolve(response.data);
    }else{
      // reject({
      //   state: "0",
      //   message: "网络异常"
      // });
      Message({
        type:'error',
        showClose: true,
        message:'网络异常，请检查网络连接是否正常！'
      })
    }
  });
}

export default {
  post(url, params) {
    return axios({
      method: "post",
      url,
      data: params
    }).then(response => {
      return checkStatus(response);
    });
  },
  get(url, params) {
    params = qs.stringify(params);
    return axios({
      method: "get",
      url,
      params
    }).then(response => {
      return checkStatus(response);
    });
  }
};

使用：在main.js里面引入这个文件，并挂载到vue原型上，这样可以通过this.xxxx去拿到

import axios from './api/api.js'   //引入axios文件夹
Vue.prototype.$axios = axios;   //挂载到整个Vue原型上
axios 的使用：在需要请求的页面如下引用

//post请求

this.$axios.post('url',{key:value}).then(res =>{
   cons.log(res,'后端返回数据') 
})
//get请求
this.$axios.get('url',{key:value}).then(res =>{
   cons.log(res,'后端返回数据') 
})