1、在src下创建一个Https的文件
在api.js中
import service from './index';
export default {
//写请求
login({ username, password }: { username: string, password: string }) {
},
getDate({pagenum,pagesize,query}:{pagenum:number|string,pagesize:number|string,query?:string}){
}
}
index.js
import axios, { AxiosInstance, AxiosRequestConfig, AxiosError, AxiosResponse } from 'axios'
import nProgress from 'nprogress'
import nprogress from 'nprogress';
const service: AxiosInstance = axios.create({
baseURL: 'http://v.juhe.cn/', //基础路径
timeout: 10000
})
// 请求拦截: 每一次发请求都会做的事情
service.interceptors.request.use((config: AxiosRequestConfig): AxiosRequestConfig => {
nProgress.start()
let token = localStorage.getItem('token')
config.headers['Authorization'] = token
return config
}, (err: AxiosError) => {
console.log(err)
return Promise.reject(err)
})
//响应拦截
service.interceptors.response.use((res: AxiosResponse): AxiosResponse => {
return res.data
}, (err: AxiosError) => {
if (err.response && err.response.status) {
nprogress.done()
console.log(err)
// 错误请求的状态码
let status = err.response.status
// if (status === 400) {
// Message.error('参数错误')
// }
// if (status === 401) {
// Message.error('登录过期,请重新登录')
// }
// if (status === 403) {
// Message.error('没有权限')
// }
// if (status === 404) {
// Message.error('接口路径错误')
// }
// if (status === 500) {
// Message.error('服务器出错')
// }
// if (status === 503) {
// Message.error('服务器在维护')
// }
// }
return Promise.reject(err)
}
})
export default service
在router.js 加入
const isPro: boolean = process.env.NODE_ENV === 'production'
const router = createRouter({
//history路由模式
history: isPro ? createWebHashHistory(process.env.Base_URL) : createWebHistory(process.env.BASE_URL),
routes
});