一、控制台输入命令安装axios
npm install axios
二、项目src文件夹下创建api文件夹,文件夹内分别创建index.js和request.js文件
![](https://i-blog.csdnimg.cn/blog_migrate/e618c16a32563e76e024c9e29771a09b.png)
request.js文件用于编写二次封装axios代码以及配置请求拦截器
// 对axios进行二次封装
import axios from "axios"
// 引入进度条 npm install --save nprogress 进度条
import nprogress from "nprogress"
// 引入进度条样式
import "nprogress/nprogress.css"
// start:进度条开始 fone:进度条结束
// 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'))
})
// 对外暴露
export default requests
index.js用于做api接口的统一管理
// API统一管理
import requests from "./request";
// /api/product/getBaseCategoryList get 无参数
export const reqCategoryList = () => requests({ url: '/product/getBaseCategoryList', method: 'get' })
// post 带参
export const reqGetSearchInfo=(data)=>requests({url:'/list',method:'post',data})
接口调用操作
//解构index.js的接口函数
import {reqCategoryList} from '@/api/index'
async categoryList() {
let res = await reqCategoryList()
if(res.code==200){
//请求成功操作
}
}