vue项目的axios异步请求api 封装
方法一、
直接在 建立 api/index.js 文件
//1.引入axios模块
import axios from 'axios'
//2.全局配置
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1'
//3.添加请求拦截器
axios.interceptors.request.use(function (config) {
//1.获取token
let token = localStorage.getItem('token')
//2.判断
if (token) {
//设置请求头(后期请求接口 http请求头携带Authorization参数)
config.headers['Authorization'] = token
}
return config
}, function (error) {
// Do something with request error
return Promise.reject(error)
})})
// 每一次拿到数据都需要经过这里 - 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么 --- 关闭loading动画
return response
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error)
})
// 语法
// GET axios.get(请求路径,{params: 数据对象})
// axios.get(请求路径,{params: {uname:'aaa', pwd:'bbb'}})
// POST axios.post(请求路径,数据对象)
// PUT axios.put(请求路径,数据对象)
// DELETE axios.delete(`请求路径/${id}`)
export const getCartCheckNum = params => { // params userId, goodsId
return axios.get('/api/v1/cart/checkNum', {params: params}).then(res => res.data)
}
export const postCart = params => { // params userId, goodsId
return axios.get('/api/v1/cart/checkNum', params).then(res => res.data)
}
方法二、
将每个请求的方法对应模块进行在封装
1、api/index.js
import axios from 'axios'
// 1.通过当前的运行命令判断出当前的运行环境,切换请求地址
// 开发环境 + 测试环境 + 生产环境
const isDev = process.env.NODE_ENV === 'development'
// isDev --- true ---- 开发环境 ---- npm run serve
// isDev ---- false ---- 生产环境 ---- npm run build
// 如果是开发环境,服务器可能是本地的,也可能是服务器上的
const baseUrl = isDev ? '本地网址' : '服务器网址'
// 2.自定义axios,添加axios拦截器
const instance = axios.create({
baseURL: baseUrl
})
// 在实例已创建后修改默认值,比如请求时需要拿到token值
// instance.defaults.headers.common['token'] = token
// 自定义超时时间
instance.defaults.timeout = 6000
// 每一次发送请求前都需要经过这里 - 添加请求拦截器
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么 -- 显示loading动画,携带token信息
const token = localStorage.getItem('token')
config.headers.common.token = token
return config
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error)
})
// 每一次拿到数据都需要经过这里 - 添加响应拦截器
instance.interceptors.response.use(function (response) {
// 对响应数据做点什么 --- 关闭loading动画
return response
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error)
})
export default instance
2、api/home 模块
import request from './index'
/**
* 封装首页轮播图请求
*/
export function getBannerlist (params) {
const { url } = params
return request({
url,
method: 'GET'
})
}
/**
* 封装首页列表请求
*/
export function getProlist (params) {
const { url } = params
return request({
url,
method: 'GET'
})
}
导航守卫
前置导航守卫 (全局)
//前置导航守卫
router.beforeEach((to, from, next) => {
//to 要去的路由配置
//from 当前的路由配置
//next 一定要调用,让to的路由配置继续生效,比如如果去登陆直接next(),否则判断token是否存在,如果存在就next()
if (to.path === '/') return next(); //使用return,不需要写else
//判断其他页面是否有token
const token = localStorage.getItem('token');
//存在继续往后走
if (token) return next();
router.push({
name: 'Login'
})
});
局部导航守卫
export default {
computed: {
...mapState({
loginstate: state => state.user.loginState
})
},
// 导航守卫
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当守卫执行前,组件实例还没被创建
// if (this.loginstate === 'ok') {
// next()
// } else {
// this.$router.push('/login')
// }
next(vm => {
if (vm.loginstate === true) {
next()
} else {
vm.$router.push('/login')
}
})
}