二次封装axios

axios：axios是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中，axios负责与后端交互，get、post后端接口信息，相当前后端的窗口。
在做项目的时候，先对axios进行二次封装，然后在各个项目组件中使用，这样的话对axios统一管理，即使有一天axios宣布不再更新，我们需要更换的时候，我们可以把封装好的axios换了就行

下面这段代码是一个购物商城项目中对axios的二次封装
这段代码不但对axios进行了二次封装，而且还引入了nprogress进度条

import axios from "axios";
//引入进度条
import Nprogress from "nprogress";
//引入进度条样式
import 'nprogress/nprogress.css'

//利用axios对象的方法create，去创建一个axios实例
const service = axios.create({
  //基础路径
  baseURL:'/api',
  //请求超时时间   （5s内没响应就失败了）
  timeout:5000
})

//请求拦截器  
//axios实例的拦截器的request请求使用配置对象，返回配置对象
service.interceptors.request.use((config)=>{
  //进度条开始
  Nprogress.start()
  //请求成功的返回配置对象
  return config
},(error)=>{
  //请求失败的返回，后面的then或者catch回调随便写不写
  return Promise.reject(error)
})

//响应拦截器
service.interceptors.response.use((response)=>{
  //进度条结束
  Nprogress.done()
  //响应成功的返回
  return response
},(error)=>{
  Nprogress.done()
  //响应失败的返回
  return Promise.reject(error)
})

//导出axios实例
export default service

请求拦截器和响应拦截器
请求拦截器就是在发送请求之前实现某些操作，响应拦截器就是在发送请求之后实现某些操作，具体用法如下：

// 请求拦截器
axios.interceptors.request.use((config)=> {
   // 在发送请求之前做些什么
   return config;
 },  (error)=> {
   // 对请求错误做些什么
   return Promise.reject(error);
 });

// 响应拦截器
axios.interceptors.response.use( (response)=> {
   // 对响应数据做点什么
   return response;
 }, (error)=> {
   // 对响应错误做点什么
   return Promise.reject(error);
 });

在封装好axios后就需要都API进行统一管理

//引入axios实例
import service from "./ajax";

//获取商品的三级联动数据
export const reqBaseCategoryList = ()=>service.get('/product/getBaseCategoryList')

//banner轮播图的接口
export const reqGetBannerList = () => mockRequests({url:'/banner',method:'get'})

下一步就是组件中发请求了，但是前端和后端的服务器是不一样的，这就需要实现代理跨域的问题，前端——>代理——>后端，这部分在vue.config.js中进行配置，代码可以在webpack官网找

module.exports = {
    //代理跨域
    devServer: {
      proxy:{
        //带有/api的请求就发给后端接口
        '/api':{
          //后端接口
          target:'http://39.98.123.211'
        }
      }
    }
}

在后面就是vuex的三连环，然后就是组件获取仓库数据，动态展示数据

vuex.png

这张图是vue官网上截的，展示了vuex的三连环