axios的二次封装（拦截器）、Vuex--modules

对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当中捞到组件当中，进行遍历渲染