vue项目的axios异步请求api 封装 & 导航守卫

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')
      }
    })
  }