四、axios使用
1）安装：
cnpm i axios -S
2）封装
// 文件路径：src/config/request.js
import Axios from 'axios';
// 创建Axios实例
const requests = Axios.create({
baseURL: "/api", // 基础路径
timeout: 5000 // 超时时长
})
// 请求拦击
requests.interceptors.request.use((config) => {
return config;
})
// 响应拦截
requests.interceptors.response.use((res) => {
return res.data;
}, (err) => {
// 终结promise链
return Promise.reject(new Error("请求失败！"));
})
export default requests;
3）代理
// vue.config.js
module.exports = {
// 关闭eslint校验
lintOnSave: false,
// 代理
devServer: {
proxy: {
'/api': {
target: 'http://39.98.123.211', // 代理目标路径
// pathRewrite: { '^/api': '' }, // 重写/api
},
},
},
}
4）使用
// src/api/index.js
import requests from '@/config/request';
export const categoryList = () => {
return requests({
url: "/product/getBaseCategoryList",
method: "get",
})
}
5）配合nprogress进度条插件使用
// src/config/request.js
// 引入nprogress进度条插件
import nprogress from 'nprogress';
// 引入nprogress进度条样式
import "nprogress/nprogress.css"
// 请求拦击
requests.interceptors.request.use((config) => {
// 开启进度条
nprogress.start()
return config;
})
// 响应拦截
requests.interceptors.response.use((res) => {
// 结束进度条
nprogress.done()
return res.data;
}, (err) => {
// 终结promise链
return Promise.reject(new Error("请求失败！"));
})
