request.js
// 对于axios进行二次封装 import axios from 'axios' //引入进度条 import nprogress from 'nprogress' //引入 //start:进度条开始 done:进度条结束 import "nprogress/nprogress.css" // 1.利用axios对象的方法create,去创建一个axios实例 // 2.request就是axios,只不过稍微配置一下 const requests = axios.create({ // 配置对象 // 基础路径,发请求的时候,路径当中会出现api baseURL: "/api", // 代表请求超时的时间5s timeout: 5000 }); //请求拦截器:在发请求前,请求拦截器可以检测到,可以在请求发送出去之前做一些事情 requests.interceptors.request.use((config)=>{ //config: 配置对象,对象里面有一个属性很重要,header请求头 //进度条开始动 nprogress.start(); return config; }) //响应拦截器 requests.interceptors.response.use((res)=>{ //成功的回调函数:服务器响应数据回来以后,响应拦截器可以检测到,可以做一些事情 nprogress.done(); return res.data; },(error)=>{ //响应失败的回调函数 return Promise.reject(new Error('fail')); }) // 对外暴露 export default requests;
index.js
// 当前这个模块:API进行统一管理 import requests from "./request"; import mockRequests from './mockAjax' // 三级联动的接口 // /api/product/getBaseCategoryList get请求 无参数 // 发请求 axios 发送请求返回结果Promise export const reqCategoryList = (() => { return requests({url: '/product/getBaseCategoryList', method: 'get'}) }); //获取banner(Home首页轮播图接口) export const reqGetBannerList=()=>mockRequests.get('/banner')
Vue基础:axios的二次封装后项目中直接修改引用就行
猜你喜欢
转载自blog.csdn.net/qq_51066068/article/details/126608056
今日推荐
周排行