对axios进行二次封装
为啥要封装? 不符合我的需求 满足不了我的需求
最终达到的效果
配置基础路径和超时限制
添加进度条信息 nprogress
返回的响应不再需要从data属性当中拿数据,而是响应就是我们要的数据
统一处理请求错误, 具体请求也可以选择处理或不处理
axios的拦截器
两个作用:1、本质是拦截报文 2、 添加功能
import axios from "axios";
import Nprogress from 'nprogress'
import 'nprogress/nprogress.css'
Nprogress.configure({ showSpinner: false });
// 1、配置基础路径和超时限制
const instance = axios.create({
// baseURL本身是为了写接口的公共部分作为基础路径
// 最终如果要配代理,这里写的是代理的标识
baseURL: '/api',
timeout: 20000,
});
// 添加进度条信息 nprogress
instance.interceptors.request.use(
(config) => {
// config配置,你写axios函数的时候,传递的配置对象,
// 这些配置项最终都会解析到报文里面去,所以config我们可以认为就是我们的请求报文
// 1、修改报文 添加头信息
// 2、在此开启额外功能
Nprogress.start()
return config
},
// 失败的回调一般可以不配
(error) => {
alert('请求拦截失败')
return Promise.reject(error)
}
);
instance.interceptors.response.use(
(response) => {
Nprogress.done()
// 3返回的响应不再需要从data属性当中拿数据,而是响应就是我们要的数据
return response.data
},
(error) => {
Nprogress.done()
// 4、统一处理请求错误, 具体请求也可以选择后续继续处理或不处理
alert('发送ajax请求失败')
// return new Promise(() => {})
return Promise.reject(error)
}
);
export default instance
api/index.js
// 这个文件是专门用来写接口请求函数的
// 以后每个接口请求数据的时候都书写一个函数来对应
// 想要哪个接口的数据,后期直接调用对应的函数即可
import request from '@/utils/request'
export const reqCategoryList = () => {
return request({
url:'/product/getBaseCategoryList',
method:'get'
})
}
// reqCategoryList()
main.js
// 第一种测试接口的方法,需要在模块当中调用接口请求函数
// import '@/api'
// 第二种测试接口的方法
// import {reqCategoryList} from '@/api'
// reqCategoryList()
Vuex--modules
第一次项目当中发请求获取数据流程
1、考虑工具,axios二次封装
2、书写api接口请求函数
3、测试写好的api接口请求函数(2种方法)配置代理解决跨域
4、考虑数据回来存在哪(用不用vuex管理) vuex的配置及vuex的模块化
5、书写三连环(写完三连环请求并没有发送)
6、哪个组件用数据,在哪个组件当中dispatch,数据就存储到了vuex的state当中
7、把数据从vuex当中捞到组件当中,进行遍历渲染