安装axios和二次封装、接口统一管理
cnpm install --save axios@0.24
二次封装:
项目中新建api目录,及request.js
//对于axios进行二次封测 import axios from 'axios'; //1.利用axios读写的方法create,创建一个axios实例 const request = axios.create({ //设置基础路径,发送请求时路径自动拼接上api,如http://xxx:8080/api/xxx baseURL: "/api", timeout: '5000' }); //请求拦截器:在发请求前,请求拦截器可以检测到,可以在请求发出去之前做一些事情 request.interceptors.request.use((config)=>{ //config:配置对象,对象里面有个属性,header请求头 return config; }); //响应拦截器 request.interceptors.response.use((res)=>{ //服务器成功的回调函数,服务器响应数据回来以后,响应拦截器可以检测到 return res.data },(error)=>{ //服务器响应失败的回调函数 return Promise.reject(new Error('fail'));//终止promise链 }) //对外暴露 export default request;
接口统一管理
新建index.js
import request from "./request"; //示例 // /api/product/getBaseCategoryList GET请求 无参 export const reqCategoryList = (req)=>{ //发请求:axios发请求返回结果是Promise对象 return request({ url: '/product/getBaseCategoryList', method: 'GET', params:{ k: req } }) }
请求接口的使用(示例:在main.js中发起请求)
import {reqCategoryList} from '@/api/index' reqCategoryList("abc").then(res=>{ console.log(res) })