简单封装axios(可配合mockjs使用)对请求方法进行二次封装

原创

已于 2023-12-11 17:58:16 修改 · 737 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

于 2023-12-11 17:54:04 首次发布

本文介绍了如何在Vue项目中安装并配置axios库，提供简单封装以及与mockjs配合实现接口模拟，展示了如何在组件中使用这些封装的请求方法获取数据。

一、安装axios

npm install axios --save

二、简单封装axios(可配合mockjs使用：使用Mockjs模拟（假数据）接口(axios))

在src/utils文件夹下新建axios.js文件：

import axios from 'axios';

//设置axios
const service=axios.create({
    timeout: 1000*60,
    baseURL:'',//对axios发送的请求路径进行集中设置
    // baseURL:'/api',//对axios发送的请求路径进行集中设置
    //意思是在接口路径前加上/api
    //这里的 /api 是和vue.config.js中proxy 中设置的对应
})

//封装post请求
let post=function(url,data_={}){
    return new Promise((resolve,reject)=>{
      service.post(url, data_).then((res) => {
          console.log('post res', res);
            return resolve(res)
        }).catch((err)=>{
            return reject(err)
        })
    })
}

//封装get请求
let get=function(url,params){
    return new Promise((resolve,reject)=>{
        service.get(url,{params}).then