[vue项目笔记]axios在vue-router里面的第二次封装

axios二次封装

request.js

//对axios进行二次封装
import axios from "axios"
//引入进度条
import nprogress from "nprogress"
import 'nprogress/nprogress.css'


//1.利用axios对象方法create,去创建一个axios实例
//2.request就是axios，只不过稍微配置了一下
const requests = axios.create({
  //配置对象
  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL : '/api',
  // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
  // 如果请求话费了超过 `timeout` 的时间，请求将被中断
  timeout: 5000,
})

//请求拦截器,在发请求之前可以监测到，可以在请求发出去之前做一些事情
requests.interceptors.request.use((config)=>{
  //在请求之前做些什么
  //进度条开始显示
  nprogress.start()
  //config:配置对象，对象里面有一个属性很重要，headers请求头
  return config
},(error)=>{
  //对请求失败做些什么
  return Promise.reject(new Error('faile'))
});

//响应拦截器
requests.interceptors.response.use((res)=>{
  //进度条结束显示
  nprogress.done()
  //成功的回调函数，服务器响应数据回来以后，响应拦截器可以监测到，可以做一些事情
  return res.data
},(error)=>{
  //响应失败的回调函数
  return Promise.reject(new Error('失败'))
})

// 对外暴露
export default requests;

index.js

//引入二次封装的axios
import request from './request';

//三级菜单的请求地址  /api/product/getBaseCategoryList   GET    没有任何参数
//对外暴露一个函数，只要外部调用这个函数，就想服务器发起ajax请求、获取咱们的三级菜单数据。当前咱们这个函数只需要把服务器返回结果返回即可。
export const reqgetCategoryList = () => request.get('/product/getBaseCategoryList')