02前端项目总结----axios二次封装和接口统一管理

axios二次封装

为什么要进行二次封装axios？
  - 主要是为了请求拦截器和响应拦截器
        - 请求拦截器：在发送请求之前可以处理一些业务
        - 响应拦截器：当服务器数据返回以后处理一些业务

api/request.js

//对于已有的axios进行二次封装

//引入axios
import axios from 'axios';

//1.利用axios对象的方法create，创建一个axios实例
//request就是axios，只不过可以配置一下
const request = axios.create({
    //配置对象
    baseURL:"/api",//基础路径，发送请求的时候，路径当中会出现api
    timeout:5000,//请求超时时间，超过五秒就失败
});
//请求拦截器
request.interceptors.request.use((config)=>{   
//config是配置对象，其中有个重要属性：headers请求头
    return config;
})

//响应拦截器
request.interceptors.response.use(
    (res)=>{
        return res.data;
    }, //成功的回调：数据响应回来做一些操作
    (error)=>{
        return Promise.reject(new Error('fail'))
    }  //服务器响应失败的回调
)

//对外暴露
export default request;

接口统一管理

统一管理所有接口，不用在项目中挨个查找修改

api/index.js

当前模块对所有的API接口进行统一的管理

import requests from "./request";
//三级联动的接口
//请求地址：/api/product/getBaseCategoryList get 无参数

//对外暴露函数请求，外部模块可以调用，则就是发送请求
export const reqCategoryList = ()=>{
    //发送请求 - axios函数返回是promise对象
    return requests(
        {
            url:'/product/getBaseCategoryList',
            method: 'get'
        }) //不用加上api,baseUrl已经添加了
}

跨域问题

• 什么是跨域？存在协议、域名、端口号不同的请求，称之为跨域

  前端本地服务器地址：http://localhost:8083/#/home
  需要获取的后台服务器地址：http://39.98.123.211

  • 两者协议相同，但域名、端口号不同

  • 解决方式：JSONP,CROS,代理服务器

  跨域是浏览器与服务器之间的约定，而服务器之间是可以进行通信的

  所以通过代理浏览器和服务器之间的代理服务器。代理服务器与浏览器的域名和端口号一致，所以不存在跨域。只需通过代理服务器与所需服务器打交道，代理服务器收到前端浏览器的路径带有api，然后代理服务器向后台服务器请求数组放回给前端。

  本地服务器上没有接口，后台服务器上有–>配置代理环境-webpack

在vue.config.js内

 //代理跨域
devServer:{
    proxy:{
      '/api':{
        target:'http://gmall-h5-api.atguigu.cn',//后台服务器地址
        //pathRewrite:{'^/api':''},//路径重写不需要了
      }
    }
  }

进度条的使用

nprogress进度条的使用
- 利用nprogress插件实现
- 使用场景：当项目中发送请求，那么进度条就开始使用，数据返回之后进度条结束
- 在请求和响应拦截器使用
nprogess实质是一个对象：
- 对象身上有done、start方法属性(结束、开始)

注意:需要引入样式，在node_modules依赖里面

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

//请求拦截器
requests.interceptors.request.use((config)=>{  
    //在请求时，进度条开始动
    nprogress.start();
    return config;
})

//响应拦截器
requests.interceptors.response.use(
    (res)=>{
        //进度条结束
        nprogress.done();
        return res.data;
    },
    (error)=>{
        return Promise.reject(new Error('fail'))
    } 
)