Vue项目--尚品汇（axios重写，代理服务器、API统一管理）

1.重写axios

src文件夹下创建api文件夹，api文件夹里的request.js文件（请求网络数据）写如下内容：

//对axios进行二次封装

//需要用到原生axios的请求和相应拦截器
import axios from 'axios'

//1:利用axios对象的方法create，去创建一个axios实例
// 2: request就是axios，只不过稍微配置一下
const requester = axios.create({
    //基础路径,发请求的时候，路径当中会出现api
    baseURL:'/api',
    //代表请求超时的时间5S
    timeout : 5000,
});

//请求拦截器:在发请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情
requester.interceptors.request.use((config)=>{
    //config:配置对象，对象里面有一个属性很重要，headers请求头
    return config
})
//相应拦截器：传成功和失败的回调
requester.interceptors.response.use((res)=>{
    return res.data;
},(err)=>{
    return Promise.reject(new Error('faile'));
})

export default requester;

2.接口统一管理：

在api文件夹下创建index.js文件，在此文件中进行接口请求的统一管理（如果请求的次数只有一两次，也可以直接写在生命周期函数里）

//对API进行统一管理
import requester from "./request";

//三级联动接口
export const reqCategoryList=()=> requester({
    url:'/product/getBaseCategoryList',
    method:'get'
});

//简写形式
//export const reqCategoryList=()=> requester.get('/product/getBaseCategoryList');

3.解决跨域

在vue.config. js里：

module.exports={
    //关闭eslint
    lintOnSave:false,
    //代理跨域
    devServer:{
        proxy:{
            'api':{
                target:'http://39.98.123.211',
                // pathRewrite:{'^/api':""}
            }
        }
    }
}

4.api接口的使用

import {reqCategoryList} from '@/api'
reqCategoryList()

5.网络请求进度条的使用--nprogress

安装：cnpm install --save nprogress

引入：进度条及其样式（request.js）：

import nprogress from 'nprogress';

import 'nprogress/nprogress.css'     //可以在里面修改进度条样式

使用：在请求拦截器里加nprogress.start()，在响应拦截器里加nprogress.done()