axios二次封装、数据代理、nprogress

axios安装

 npm install --save axios 

基本配置

首先在src文件夹下创建api文件夹，同时在api文件夹内建立request.js文件。 import引入axios。然后对axios进行简单配置 配置如下所示。基本路径配置好之后，以后就无需自己输入/api、当请求超过5秒，代表请求失败。

请求拦截器

请求拦截器：再发请求前，请求拦截器可以检测到。可以实现一些功能 具体代码如下所示

响应拦截器

在上述都配置完后，将封装结果暴露出去。

整体代码如下

//



//axios二次封装
import axios from "axios";
//引入进度条
import nprogress from "nprogress";
// 引入进度条样式
import "nprogress/nprogress.css";
// start:进度条开始
// done:进度条结束

//利用axios对象的方法create，创建一个asiox实例
//requests就是axios，只不过稍微配置一下
let requests = axios.create({
    //基础路径
    baseURL: "/api",
    //请求不能超过5S
    timeout: 5000,
  });
//请求拦截器，再发请求前，请求拦截器可以检测到
requests.interceptors.request.use((config)=>{
    //config:配置对象,对象里有一个属性，headers请求头
    nprogress.start()
    return config
})
//响应拦截器
requests.interceptors.response.use((res)=>{
    //响应成功的回调函数
    nprogress.done()
    return res.data
},(error)=>{
    //响应成功的回调函数
    // alert("服务器响应数据失败")
    console.log(1);
})

//对外暴露
export default requests

数据代理

在二次封装完axios后，会出现发送请求但是得不到数据的现象，这一现象出现的原因时出现了跨域问题。 为了解决这个问题，可以利用数据代理。首先找到vue.config.js文件，按如下方式进行配置。数据就可以成功访问。原理是前台项目与后台项目存在跨域问题（浏览器存在跨域问题），而服务器之间没有跨域问题。因此利用代理服务器进行数据请求。

nprogress

为了实现请求数据时的进度条效果，引入nprogress 首先安装nprogress 安装代码如下

npm install nprogress

安装完成之后，在request.js文件中import 引入nprogress以及它的样式nprogress.css。如下图所示

引入完成之后，在请求拦截器中，利用nprogress原型上的start方法使进度条开始，在响应拦截器中利用nprogress原型上的done方法使进度条结束。具体代码如下。