1. 安装axios和qs
cnpm install axios --save
cnpm install qs
qs是一个url参数转化(parse和stringify)的js库
2. 封装请求
在src下创建一个axios文件夹 在axios文件夹下创建三个文件, api.ts http.ts request.ts
request.ts(vite.config.ts中如果配置了跨域的话记得改baseUrl)
// 封装axios配置
import axios, { AxiosRequestConfig, Method } from "axios"
import { ElMessage } from "element-plus"
import router from '../router'
import store from "../store"
// 封装请求失败的统一处理
const errorHandle = (status: number, other: string) => {
switch (status) {
case 302: ElMessage.error('接口重定向了!');
break;
case 400:
ElMessage.error("发出的请求有错误,服务器没有进行新建或修改数据的操作==>" + status)
break;
case 401:
router.replace({
path: '/login',
});
break;
// 403 token过期
// 清除token并跳转登录页
case 403:
ElMessage.error("登录过期,用户得到授权,但是访问是被禁止的==>" + status)
// store.commit('token', null);
setTimeout(() => {
router.replace({
path: '/login',
});
}, 1000);
break;
case 404:
ElMessage.error("网络请求不存在==>" + status)
break;
case 406:
ElMessage.error("请求的格式不可得==>" + status)
break;
case 408: ElMessage.error(" 请求超时!")
break;
case 410:
ElMessage.error("请求的资源被永久删除,且不会再得到的==>" + status)
break;
case 422:
ElMessage.error("当创建一个对象时,发生一个验证错误==>" + status)
break;
case 500:
ElMessage.error("服务器发生错误,请检查服务器==>" + status)
break;
case 502:
ElMessage.error("网关错误==>" + status)
break;
case 503:
ElMessage.error("服务不可用,服务器暂时过载或维护==>" + status)
break;
case 504:
ElMessage.error("网关超时==>" + status)
break;
default:
ElMessage.error("其他错误错误==>" + status)
}
}
// const token = String(window.localStorage.getItem('token'))
// 实例化请求配置
const instance = axios.create({
headers: {
"Content-Type": "application/json;charset=UTF-8",
"Access-Control-Allow-Origin-Type": '*',
// 'Authorization': token,
},
timeout: 1000 * 10,
baseURL: '/api',
withCredentials: false
})
/**
* 请求拦截器
* 每次请求前,如果存在token则在请求头中携带token
*/
instance.interceptors.request.use(
config => {
// 登录流程控制中,根据本地是否存在token判断用户的登录情况
// 但是即使token存在,也有可能token是过期的,所以在每次的请求头中携带token
// const token = store.state.token;
// localStorage.setItem('token', token);
return config;
},
error => {
ElMessage.error(error.data.error.message);
return Promise.reject(error.data.error.message);
}
)
// 响应拦截器
instance.interceptors.response.use(function (config) {
return config
}, error => {
const { response } = error;
if (error && response) {
errorHandle(response.status, response.data.message);
return Promise.reject(error.response.data)
// 请求失败
} else {
// 超时处理
if (JSON.stringify(error).includes('timeout')) {
ElMessage.error('服务器响应超时,请刷新当前页')
}
return Promise.reject(error.message)
}
}
)
export default instance
http.ts
/*
* @Author: your name
* @Date: 2020-05-20 21:42:01
* @LastEditTime: 2020-05-26 10:20:50
* @LastEditors: your name
* @Description: In User Settings Edit
* @FilePath: \webapp\src\utils\http.js
*/
// 导入封装好的axios实例
import request from './request'
import qs from "qs"
var token = ''
const http = {
/**
* methods: 请求
* @param url 请求地址
* @param params 请求参数
*/
get(url: string, params?: any) {
token = sessionStorage.getItem("token")
const config = {
method: 'get',
url: encodeURI(url),
headers: {
'Authorization': token
},
params: null
}
if (params) config.params = qs.stringify(params)
return request(config)
},
post(url: string, params?: any) {
token = sessionStorage.getItem("token")
const config = {
method: 'post',
url: encodeURI(url),
headers: {
'Authorization': token
},
data: null
}
if (params) config.data = qs.stringify(params)
return request(config)
},
put(url: string, params?: any) {
token = sessionStorage.getItem("token")
const config = {
method: 'put',
url: encodeURI(url),
headers: {
'Authorization': token
},
params: null
}
if (params) config.params = qs.stringify(params)
return request(config)
},
delete(url: string, params?: any) {
token = sessionStorage.getItem("token")
const config = {
method: 'delete',
url: encodeURI(url),
headers: {
'Authorization': token
},
params: null
}
if (params) config.params = qs.stringify(params)
return request(config)
}
}
//导出
export default http
api.ts
// 所有接口数据
import http from './http'
export class api {
public static user = {
login_by_form: (url, params) => http.post(url, params),
}
}
3. 使用
import { api } from '@/axios/api'
api.user.login_by_form(url, obj).then((res:any) => {
// console.log(res)
// store.commit('login/setLoginToken', true)
// router.push('/home')
})