1、http.js
/***
* 当前端的不在处理跨域的时候需要修改请求的路径 ==> /api
*/
import axios from 'axios'
//导入vant的函数
import {Toast } from 'vant';
//导入登录的工具类
import {login} from '@/assets/js/login.js'
//获取路由的实列
import router from '../router/index'
// 环境的切换
if (process.env.NODE_ENV === 'development') {
axios.defaults.baseURL = 'http://192.168.0.56:8080/ebrochure' // 开发环境
} else if (process.env.NODE_ENV === 'debug') {
axios.defaults.baseURL = '' // 调试环境
} else if (process.env.NODE_ENV === 'production') {
axios.defaults.baseURL = '' // 生产环境
}
axios.defaults.timeout = 10000 //设置延迟时间
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8;multipart/form-data'
// 允许当前axios携带cookie
axios.defaults.withCredentials = true
// 请求拦截器
axios.interceptors.request.use(
config => {
// 每次发送请求之前判断是否存在token,如果存在,则统一在http请求的header都加上token,不用每次请求都手动添加了
// 即使本地存在token,也有可能token是过期的,所以在响应拦截器中要对返回状态进行判断
// const token = this.$store.state.Authorization
// token && (config.headers.Authorization = token)
// return config
// if (localStorage.getItem('Authorization')) {
// config.headers.Authorization = localStorage.getItem('Authorization');
// }
config.headers.Authorization = localStorage.getItem('Authorization');
return config;
},
error => {
return Promise.error(error)
})
// 响应拦截器
axios.interceptors.response.use(
response => {
if (response.status === 200) {
return Promise.resolve(response)
} else {
return Promise.reject(response)
}
},
// 服务器状态码不是200的情况
error => {
if (error.response.status) {
switch (error.response.status) {
// 401: 未登录
// 未登录则跳转登录页面,并携带当前页面的路径
// 在登录成功后返回当前页面,这一步需要在登录页操作。
case 401:
// router.replace({
// path: '/Login',
// query: {
// redirect: router.currentRoute.fullPath
// }
// })
login()
break;
// 403 token过期
// 登录过期对用户进行提示
// 清除本地token和清空vuex中token对象
// 跳转登录页面
case 403:
Toast({
message: '登录过期,请重新登录',
duration: 1000,
forbidClick: true
})
// 清除token
localStorage.removeItem('Authorization')
// 跳转登录页面,并将要浏览的页面fullPath传过去,登录成功后跳转需要访问的页面
// setTimeout(() => {
// router.replace({
// path: '/Login',
// query: {
// redirect: router.currentRoute.fullPath
// }
// })
// }, 1000)
login()
break;
// 404请求不存在
case 404:
Toast({
message: '网络请求不存在',
duration: 1500,
forbidClick: true
})
break;
// 其他错误,直接抛出错误提示
default:
Toast({
message: error.response.data.message,
duration: 1500,
forbidClick: true
})
}
return Promise.reject(error.response)
}
}
)
/**
* get方法,对应get请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function get(url, params) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params
}).then(res => {
resolve(res.data)
}).catch(err => {
reject(err.data)
})
})
}
/**
* post方法,对应post请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function post(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err.data)
})
})
}
2、api.js
import { get, post } from './http'
export const api1 = p1 => get('http://v.juhe.cn/toutiao/index?type=&page=&page_size=&key=24a7d6a478f8bf2c367c749e598d2cc2', p1)
export const api2 = p2 => get('http://10.22.160.24:8888/lanlema/user/toLogin', p2)
export const api3 = p => post('/login', p)
3、使用
import { api1, api2, api3 } from '@/utils/api'// 导入我们的api接口
const apiGet=async ()=> {
// 调用api接口,并且提供了两个参数
api2({
// type: 0,
// sort: 1
}).then(res => {
// success
console.log(res)
}).catch((error) => {
// error
console.log(error)
})
}
const apiPost=async ()=> {
// 调用api接口,并且提供了两个参数
let postData = {
tel: 'wangming',
pwd: '12345678'
}
api3(postData).then(res => {
// success
console.log(res)
}).catch((error) => {
// error
console.log(error)
})
}
onMounted(() => {
// getInTheatersDate()
apiPost()
})