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

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

一、封装axios文件

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

安装了axios

npm install axios

封装axios

<code>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={ -- -->}){ code>

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={ -- -->}){ code>

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