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测试接口】
2.vue尚品汇商城项目-day02【vue插件-13.nprogress进度条的使用】
3.vue尚品汇商城项目-day02【11.对axios二次封装+12.接口统一管理】
4.vue尚品汇商城项目-day02【14.vuex状态管理库】
5.vue尚品汇商城项目-day02【15.动态展示三级菜单联动】