vue二次封装axios_vue axios的二次封装

一、控制台输入命令安装axios

npm install axios

二、项目src文件夹下创建api文件夹，文件夹内分别创建index.js和request.js文件

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){
        //请求成功操作
    }
}