axios二次封装

axios是目前主流的ajax封装库之一，可以很方便我们请求数据；
支持的功能：
从浏览器发出 XMLHttpRequests请求。
从 node.js 发出 http 请求。
支持 Promise API。
能拦截请求和响应。
能转换请求和响应数据。
取消请求。
实现JSON数据的自动转换。
客户端支持防止 XSRF攻击。

为什么要进行二次封装

• api统一管理,不管接口有多少,所有的接口都可以非常清晰,容易维护.
  通常我们的项目会越做越大,页面也会越来越多,如果页面非常的少,直接用axios也没有什么大的影响,那页面组件多了起来,上百个接口呢,这个时候后端改了接口,多加了一个参数什么的呢?那就只有找到那个页面,进去修改.整个过程很繁琐不易于项目的维护和迭代

看云的解释还是很详细的；

下面代码片段是简单的一个axios封装

/* 对axios进行二次封装 */
import axios from 'axios'
//引入进度条
import nProgress from 'nprogress';
//引入进度条样式
import 'nprogress/nprogress.css'
console.log(nProgress);
const instance = axios.create({
  /* 配置对象 */
  /* 配置基础路径，发送请求的时候，路径会直接出现api不需要在配置api */
  baseURL: '/api',
  /* 配置相应事件 */
  timeout:5000
})

/* 配置请求拦截器，在发送请求之前，请求拦截器可以监测到，做出一些事情 */
instance.interceptors.request.use((config) => {
  // console.log("请求拦截：" + config);
  //请求开始的时候，进度条开始启动
  nProgress.start();

  return config;
}, (error) => {
  return Promise.reject(error)
});

instance.interceptors.response.use((res) => {
  /* 服务器响应成功的的回调函数*/
  // console.log("响应拦截" + res);

  //响应的时候，进度条结束
  nProgress.done();

  return res.data
}, (error) => {
  /* 响应失败的回调函数 */
  return Promise.reject(error)
});

/* 对外暴露axios实例对象instance */
export default instance;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

封装好的axios可以单独封装请求api

• 在组件中如果需要请求数据，可以直接引入api,调用封装的请求方法；需要注意的是，请求到数据，自己打印出来看下，可以在vuex仓库中请求，但是需要注意异步操作；

/* 当前这个模块，API统一管理 */
//引入封装的axios
import instance from "./request";

/* 三级联动接口 */
//请求接口：/api/product/getBaseCategoryList
//请求方法：get
//请求参数：无
export const reqCategoryList = () => {
  return instance({
    url: '/product/getBaseCategoryList',
    method: 'get'
  }) ;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在vuex组件中请求数据

• 需要注意的是，异步请求；使用async 和 await

/* vuex模块化输出 ,每一个模块都自己建立小仓库*/

import {reqCategoryList} from '@/api'
const actions = {
  /* 通过封装的请求数据方法请求数据 */
  async categoryList({commit}) {
    let res = await reqCategoryList();
    console.log(res);
    if (res.code == 200) {
      commit("CATEGORYLIST",res.data)
    }
  }
};
const mutations = {
  CATEGORYLIST(state, value) {
    state.categoryList = value
  }
};
const getters = {};
const state = {
  categoryList : []
};

export default {
  actions,
  mutations,
  getters,
  state
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29