0
点赞
收藏
分享

微信扫一扫

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

穿裙子的程序员 2022-04-18 阅读 17
ajax

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')
举报

相关推荐

0 条评论