Vue —— Search搜索组件

步骤

• 拆分静态组件（略）
  

写 Api 接口

• api/request.js

//对 axios 进行二次封装
import axios from "axios";

//引入进度条 nprogress 以及样式(可修改) 并在请求和响应拦截器中 调用 star 和 done 方法
import nprogress from 'nprogress';
import "nprogress/nprogress.css"


//1.利用axios对象的create,去创建一个axios实例
//2.request就是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.data;
    },
    (error)=>{
   
        //响应失败的回调函数
        return Promise.reject(new Error('faile'