前端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前端整理小知识