axios在项目中的使用

一、重写push | replace

重写原因：编程式路由跳转到当前路由（参数不变），多次执行会抛出NavigationDuplicated的警告错误

（工作的时候想处理掉，不想处理对于你的程序没有任何影响）

第一种解决方案：是给push函数，传入相应的成功的回调与失败的回调

this.$router.push(
    {name:'search',params:{keyword:this.keyword},()=>{
    //可以传入成功的回调
},()=>{
    //可以传入失败的回调
}
}

第一种解决方案可以暂时解决当前问题，但是以后再用push|replace还是会出现类似现象，因此我们需要从‘根’治病，即重写push | replace

/*
    第一个参数：告诉原来方法，你往那里跳转（传递哪些参数）
    第二个参数：成功回调
    第三个参数：失败回调
    call | apply 区别：
    相同：都可以调用函数一次，都可以改变函数的上下文一次(this)
    不同：call传递参数用逗号隔开，apply传递数组
*/
let originPush = VueRouter.prototype.push;
let originReplace = VueRouter.prototype.replace;
​
VueRouter.prototype.push = function(location, resolve, reject) {
    if (resolve && reject) {
        originPush.call(this, location, resolve, reject);
    } else {
        originPush.call(this, location, () => {}, () => {});
    }
}
​
VueRouter.prototype.replace = function(location, resolve, reject) {
    if (resolve && reject) {
        originreplace.call(this, location, resolve, reject);
    } else {
        originreplace.call(this, location, () => {}, () => {});
    }
}

二、axios二次封装搭配nprogress进度条使用

跨域:如果多次请求协议、域名、端口号有不同的地方，称之为跨域 解决办法：JSONP、CROS、代理

对于axios二次封装，本人也不太了解,只是参考了官网文档了解了一点点(doge!!!!)

axios官方文档：Axios 中文文档 | Axios 中文网 | Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js

//对于axios进行二次封装
import axios from "axios";
import nprogress from "nprogress";
​
//如果出现进度条没有显示：一定是你忘记了引入样式了
import "nprogress/nprogress.css";
//底下的代码也是创建axios实例
let requests = axios.create({
    //基础路径
    baseURL: "/api",
    //请求不能超过5S
    timeout: 5000,
});
​
//请求拦截器----在项目中发请求（请求没有发出去）可以做一些事情
requests.interceptors.request.use((config) => {
    //进度条开始动
    nprogress.start();
    //config：配置对象，对象里面有一个属性很重要，headers请求头
    return config;
});
​
//响应拦截器----当服务器手动请求之后，做出响应（相应成功）会执行的
requests.interceptors.response.use(res => {
    //进度条结束
    nprogress.done();
    return res.data;
}, err => {
    return Promise.reject(new Error('Fali'));
});
​
//这里的代码是暴露一个axios实例
export default requests;

三、API接口统一管理

封装一个JS模块，进行API接口统一管理，能方便维护

//当前这个模块：API进行统一管理
import requests from "./request";
​
//三级联动接口：/api/product/getBaseCategoryList   GET    没有任何参数
export const reqCategoryList = () => {
    return requests({
        url: '/product/getBaseCategoryList', //因为配置了baseURL,所以/api可以省略
        method: 'get'
    })
}