首先进行下载
npm i axios
在src下新建api/request.js
//对axios进行二次封装
import axios from "axios"
//引入进度条
import nprogress from 'nprogress'
//引入进度条的样式 不喜欢原始颜色 可以在#nprogress .bar 哪里改颜色
import "nprogress/nprogress.css"
//start 代表进度条开始
//done 代表进度条结束
//1.利用axios对象的方法create,去创建一个axios实例
const requests = axios.create({
//配置对象
//基础路径 发送请求的时候 路径上会有api
baseURL:"/api",
//代表请求超时时间 5s
timeout:5000,
})
//请求拦截器 在发送请求之前 请求拦截器可以检测到 可以再请求发出去之前做一些事情
requests.interceptors.request.use((config)=>{
//config 配置对象 服务器相应数据回来以后 响应拦截器可以检测到 可以做一些事情
nprogress.start();
return config;
})
//响应拦截器
requests.interceptors.response.use((res)=>{
//成功的回调函数 服务器响应回来数据以后响应拦截器可以检测到 可以做一些事情
//进度条结束
nprogress.done()
return res.data;
},(error)=>{
//响应失败的回调函数
console.log(error);
return Promise.reject(new Error('fail'));
});
//对外暴露
export default requests;
在api/index.js中进行 模块化管理 对API进行统一管理
//当前的这个模块 API进行统一管理
import requests from './request';
//三级联动接口 /api/product/getBaseCategoryList get请求 无参数
export const reqCategoryList = ()=>{
//发请求 axios发情的请求参数是promise对象
requests({url:'/product/getBaseCategoryList',method:'GET'})
}
在main.js中使用 测试
import { reqCategoryList } from '../src/api/index'
reqCategoryList()
发现未请求到
此时就遇到了跨域问题 可以这样解决
vue.config.js
module.exports = {
lintOnSave:false,
//代理配置
devServer:{
proxy:{
'/api':{
//获取数据的那台服务器
target: 'http://39.98.123.211',
//路径重写
// pathRewrite:{'^/api':''}
}
}
}
}
此时就可以正常请求到了