【vue】axios组件

安装axios

npm install --save axios

对axios进行二次封装

新建文件夹api，新建文件request.js

import axios from "axios"

//利用axios对象的方法create，去创建一个axios实例
const requests = axios.create({
    //配置对象
    //基础路径，发请求的时候，路径中会出现api
    baseURL: "/api",
    //请求超时的时间
    timeout: 5000,
});

//请求拦截器：在发请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情
requests.interceptors.request.use((config)=>{
    //config: 配置对象，对象里有一个属性很重要，headers请求头
    return config;
});

//响应拦截器
requests.interceptors.response.use((res)=>{
    //成功的回调函数：服务器响应数据回来之后，响应拦截器可以检测到，可以做一些事情
    return res;
},(error)=>{
    //响应失败的回调函数
    return Promise.reject(new Error('failure'))
});

export default requests;//对外暴露requests

解决跨域问题

在vue.config.js中配置代理跨域

module.exports = {
  transpileDependencies: true,
  lintOnSave: false,
  //代理跨域
  devServer:{
    proxy: {
      'api': {
        target: 'http://localhost:8080'
      }
    }
  }
}

nprogress进度条的使用

• 安装nprogress

  npm install --save nprogress

• 在request.js中进行引入

  import axios from "axios"
  import nprogress from "nprogress";
  import "nprogress/nprogress.css"
  //利用axios对象的方法create，去创建一个axios实例
  const requests = axios.create({
      //配置对象
      //基础路径，发请求的时候，路径中会出现api
      baseURL: "/api",
      //请求超时的时间
      timeout: 5000,
  });
  
  //请求拦截器：在发请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情
  requests.interceptors.request.use((config)=>{
      //config: 配置对象，对象里有一个属性很重要，headers请求头
      nprogress.start();//进度条启动
      return config;
  });
  
  //响应拦截器
  requests.interceptors.response.use((res)=>{
      //成功的回调函数：服务器响应数据回来之后，响应拦截器可以检测到，可以做一些事情
      nprogress.done();//进度条结束
      return res;
  },(error)=>{
      //响应失败的回调函数
      return Promise.reject(new Error('failure'))
  });
  
  export default requests;

• 还可以在css中自行更改颜色等样式