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()