axios的二次封装和使用
  1. 安装axios:npm i axios -S
  2. 创建一个文件来配置axios及创建
  3. 首先创一个request.js来封装axios
import axios from 'axios'
const isDev = process.env.NODE_ENV  === 'development' // 判断环境
// 如果配置了多个的反向代理 --- 对象模式
const baseURL = isDev ? '这里设置开发下的baseURL' : '线上的baseURL'
const request = axios.create({
    baseURL
})
// 请求拦截  请求前先经过这里
request.intercepters.request.use(config => {
    // 可以设置 加载的动画效果 的展示
    // 在必要的路由设置一些额外的参数 ---- token信息携带放在此处
    console.log('正在加载....')
    return config
}, erroe => return Promise.reject(error))
// 响应拦截
// 响应拦截器 --- 所有请求的相应先到此处
request.interceptors.response.use((response) => {
  // 可以设置加载的动画效果的隐藏  请求数据的处理等
  console.log('加载完毕')
  return response
}, (error) => {
  return Promise.reject(error)
})
export default request
  • 基本的axios已经封装完成,需要请求的时候,统一管理请求可以新建一个index.js来进行管理
import request from './request' //这里引用上面导出的axios
export function getDate(params) {
    return rquest({
        url: 'data',
        method: 'post', //默认为get
        data: params // post 用data, get用params
    })
}

注意:引用的时候是结构出对应的函数哦

暂无评论