前端axios全局配置 请求拦截器 响应拦截器 封装各种请求方式

axios全局配置 请求拦截器和响应拦截器 封装各种请求方式

在Vue项目中使用axios时，封装请求方式、请求拦截器和响应拦截器是一个良好的实践。以下是一个简单的axios封装的例子，包括GET、POST请求，以及请求拦截器和响应拦截器。

一、封装axios文件

1.封装axios文件，请求头和响应头做不同处理

安装了axios

npm install axios

封装axios

import axios from 'axios'     //引入
import { Message } from 'element-ui';

let baseURL = ''  //线下
// let baseURL = '/admin'  //线上

let config = {
  baseURL: baseURL,
  withCredentials: true, // 跨域
  timeout: 30000       //设置最大请求时间
}
const _axios = axios.create(config)
/* 请求拦截器（请求之前的操作） */
_axios.interceptors.request.use(
  config => {
      //如果有需要在这里开启请求时的loading动画效果
      config.headers.token = window.localStorage.getItem('token') //添加token,需要结合自己的实际情况添加，
    return config;
  },
  err => Promise.reject(err)
);

/* 响应拦截器即异常处理 */
_axios.interceptors.response.use(
  response => {
      // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据     
        // 否则的话抛出错误
        if (response.status === 200) {            
          return Promise.resolve(response);        
      } else {            
          return Promise.reject(response);        
      }    
  },
  error => {
    // 状态码判断处理
    if(error.response.status == 500){
        Message('请求服务器错误')
    }else if(error.response.status == 401){
        Message('token过期，请重新登录')
        // router.replace({                        
        //     path: '/login',                        
        // });
        setTimeout(()=>{
          window.location.href= 'https://sys.ycyd777.com/login'
        },1500)
        // this.$router.path("/login");

    }else{
        Message(`'连接错误'${error.response.status}`);
    }
    return Promise.reject(error);
    
  }
);

//封装post,get方法
const http = {
  get(url='',params={}){
    return new Promise((resolve, reject) => {
      _axios({
        url,
        params,
        headers:{'Content-Type': 'application/json;charset=UTF-8'},
        method: 'GET'
      }).then(res => {
        resolve(res.data)
        return res
      }).catch(error => {
        reject(error)
      })
    })
  },
  post(url='',params={}){
    return new Promise((resolve, reject) => {
      _axios({
        url,
        data:params,
        headers:{'Content-Type': 'application/json;charset=UTF-8'},
        method: 'POST'
      }).then(res => {
        resolve(res.data)
        return res
      }).catch(error => {
        reject(error)
      })
    })
  }
}

export default http

2.封装不同请求方法，包括请求头部content-type。包括get post请求方式

二、请求后台接口api

在写具体接口api时候，直接定义不同method，即可对应不同request请求方法和请求头部content-type

import axios from '../axios/axios'

//设置个对象，就不用一个个暴露了，直接暴露对象
let serverApi = {};

/* 获取列表 */
//查询列表，详情就是get
/* /api/getlist是请求接口地址，有http.js里面的Ip加上，如：http:192.168.0.111:9090//api/getlist  */
// apiFun.getlist = function(params) {
let api = 'api/'   

serverApi.getAdmin = function(params) {
  return axios.post(api+'/api.sys.Company_user_read_lz/login', params)
}

// serverApi.getBaiduToken = function(params) {
//   return axios.post(api+'/api/rest/2.0/ocr/v1/vehicle_license', params)
// }

// 菜单列表
serverApi.companyModuleFindTree = function(params) {
  return axios.post(api+'/api.sys.Company_module_read_lz/findTree', params)
}
serverApi.companyModuleList = function(params) {
  return axios.post(api+'/api.sys.Company_module_read_lz/getTree', params)
}

// 角色管理--设置权限
serverApi.roleSetPower = function(params) {
  return axios.post(api+'/api.sys.Company_role_lz/setPower', params)
}

总结：封装其实是非常简单的，往往在做一个新的项目都会用到这一步，希望都能去手写一遍，这样在以后的项目中就能得心应手的使用啦！

七牛云、阿里云和腾讯云云存储基础环境搭建教程

史上最全CSS命名规则总结及公用常见的CSS前端整理小知识