安装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)
})