vue尚品汇商城项目-day02【11.对axios二次封装+12.接口统一管理】

朱雀 2024-03-24 12:44 17阅读 0赞

![在这里插入图片描述][201cb7e59bb94276b20be0c55371360b.jpeg_pic_center]

#### 文章目录 ####

*   *  11.对axios二次封装
     *   *  11.1为什么需要进行二次封装axios？
         *  11.2在项目当中经常有API文件夹【axios】
     *  12.接口统一管理
     *   *  12.1跨域问题
         *  12.2接口统一管理
         *  12.3不同请求方式的src/api/index.js说明
 *  本人其他相关文章链接

### 11.对axios二次封装 ###

> 安装命令：cnpm install --save axios

> 在src目录下新建api的文件夹，新建axios.js文件，该文件就是“对axios二次封装”。

XMLHttpRequest、fetch、JQuery、axios

#### 11.1为什么需要进行二次封装axios？ ####

请求拦截器、相应拦截器：

*  请求拦截器，可以在发请求之前可以处理一些业务。
 *  相应拦截器，当服务器数据返回以后，可以处理一些事情。

#### 11.2在项目当中经常有API文件夹【axios】 ####

接口当中：路径都带有 /api

baseURL:“/api”

`注意`：有的同学axios基础不好，可以参考git|npm关于axios的文档说明。

//对axios二次封装
    import axios from "axios";
    import nprogress from "nprogress";
    //如果出现进度条没有显示：一定是你忘记了引入样式了
    import "nprogress/nprogress.css";
    //在当前模块中引入store
    import store from '@/store';
    
    //1、利用axios对象的vreate，区创建一个axios实例
    //2.：request就是axios，只不过稍微配置一下
    const requests = axios.create({
        //基础路径，requests发出的请求的时候，路径当中会出现api
        baseURL:'/api',
        //代表请求超时的时间5s
        timeout: 5000,
    })
    //3、配置请求拦截器，在发请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情
    requests.interceptors.request.use(config => {
        if(store.state.detail.uuid_token){
            //请求头添加一个字段(userTempId):和后台老师商量好了
            config.headers.userTempId = store.state.detail.uuid_token;
        }
        //需要携带token带给服务器
        if(store.state.user.token){
            //请求头添加一个字段(userTempId):和后台老师商量好了
            config.headers.token = store.state.user.token;
        }
        //进度条开始
        nprogress.start();
        //config：配置对象，对象里面有一个属性很重要，Header请求头
        return config;
    })
    //4、配置响应拦截器
    requests.interceptors.response.use((res) => {
        //成功的回调函数
        //进度条结束
        nprogress.done();
        return  res.data;
    },(error) => {
        //失败的回调函数
        console.log("响应失败"+error)
        return Promise.reject(new Error('fail'))
    })
    //5、对外暴露
    export default requests;

### 12.接口统一管理 ###

项目很小：完全可以再组件的生命周期函数中发请求

项目大：axios.get(‘xxx’)

#### 12.1跨域问题 ####

什么是跨域：协议、域名、端口号不同的请求，称之为跨域。

#### 12.2接口统一管理 ####

*  第1步：src下的api文件夹下新建index.js文件，统一管理并暴露接口。这样的好处是：万一有100个路径前缀要修改，不用全局搜索挨个修改，而是找到统一管理文件进行单个文件内容修改即可完成效果。

//统一管理项目接口的模块
    //引入二次封装的axios（带有请求、响应的拦截器）
    import requests from "@/api/axios"
    
    //三级菜单的请求地址  /api/product/getBaseCategoryList   GET    没有任何参数
    //对外暴露一个函数，只要外部调用这个函数，就想服务器发起ajax请求、获取咱们的三级菜单数据。当前咱们这个函数只需要把服务器返回结果返回即可。
    export const reqGetCategoryList = ()=>requests.get(`/product/getBaseCategoryList`);

*  第2步：配置代理服务器解决跨域问题。在vue.config.js文件内添加devServer配置项。

module.exports = {
      productionSourceMap:false,
      // 关闭ESLINT校验工具
      lintOnSave: false,
      devServer: {
        //代理服务器解决跨域
        proxy: {
          "/api": {
            target: "http://39.98.123.211:8510"
          },
        }
      }
    };

*  第3步：在要使用axois调用都端接口的地方，使用import引入暴露的方法名直接使用即可。

#### 12.3不同请求方式的src/api/index.js说明 ####

> src/api/index.js

//统一管理项目接口的模块
    //引入二次封装的axios（带有请求、响应的拦截器）
    import requests from "@/api/axios"
    import mockRequests from "@/api/mockAjax"
    
    get无参：
    export const getCategoryList = ()=>requests.get(`/product/getBaseCategoryList`);
    export const mockGetBannerList = ()=> mockRequests.get("/banner")
    --------------------------------------------------------------------------------
    get有参：
    export const reqUpdateCheckedByid = (skuId,isChecked)=>requests({url:`/cart/checkCart/${skuId}/${isChecked}`,method:'get'});
    --------------------------------------------------------------------------------
    post有参：
    export const addOrUpdateShopCar = (skuId, skuNum)=>requests({url:`/cart/addToCart/${skuId}/${skuNum}`, method:"post"});
    export const registerUser = (params)=>requests({url: `/user/passport/register`,method: 'post', data: params});
    export const reqUserLogin = (data)=>requests({url:'/user/passport/login',data,method:'post'});

## 本人其他相关文章链接 ##

1.[vue尚品汇商城项目-day02【9.Home组件拆分+10.postman测试接口】][vue_-day02_9.Home_10.postman]  
2.[vue尚品汇商城项目-day02【vue插件-13.nprogress进度条的使用】][vue_-day02_vue_-13.nprogress]  
3.[vue尚品汇商城项目-day02【11.对axios二次封装+12.接口统一管理】][vue_-day02_11._axios_12.]  
4.[vue尚品汇商城项目-day02【14.vuex状态管理库】][vue_-day02_14.vuex]  
5.[vue尚品汇商城项目-day02【15.动态展示三级菜单联动】][vue_-day02_15.]

[201cb7e59bb94276b20be0c55371360b.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/c6562f0e841a46529fbeab1aaa113131.png
[vue_-day02_9.Home_10.postman]: https://blog.csdn.net/a924382407/article/details/129893022
[vue_-day02_vue_-13.nprogress]: https://blog.csdn.net/a924382407/article/details/129893198
[vue_-day02_11._axios_12.]: https://blog.csdn.net/a924382407/article/details/129893164
[vue_-day02_14.vuex]: https://blog.csdn.net/a924382407/article/details/129893217
[vue_-day02_15.]: https://blog.csdn.net/a924382407/article/details/129893255