在vue中，promise封装axios

最新推荐文章于 2025-10-16 12:31:47 发布

原创最新推荐文章于 2025-10-16 12:31:47 发布 · 395 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #es6

axios 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Vue应用中安装并配置axios库，同时利用FastMock模拟API接口，提供了post和get请求的方法，并展示了在开发环境和生产环境下的不同基地址设置。适合初学者理解HTTP请求和接口模拟实践。

安装axios

npm i axios --save

建文件

在这里，我创建了一个名为utils的文件夹，并创建了一个名为myAxios的js文件
建文件夹

代码

import axios from 'axios';
let baseUrl = '';
//  判断环境
if(process.env.NODE_ENV == 'development'){
    baseUrl = 'https://www.fastmock.site/mock/15e2ed40f35bffc490901023f02c55f0/api';
}else{
    baseUrl = '';
}
axios.defaults.baseURL = baseUrl;
const $http = axios.create()

/**
 * post请求方式;
 * params: url, params
 */
export const post = (url, params) =>{
    params = params || {};
    return new Promise((resolve,reject) => {
            $http.post(url, params).then((res) =>{
                if(res.data.code == 0){
                    resolve(res.data);//  成功
                }else{
                    reject(res); //  操作失败
                }
            }).catch( err =>{
                console.log("网络错误", err)  
            })
    })

}

/**
 * get请求方式
 */
export const get = (url, params) =>{
    params = params || {};
    return new Promise((resolve, reject) =>{
        $http.post(url, params).then((res) =>{
            if(res.data.status){
                resolve(res.data);  //  成功
            }else{
                reject(res); //  操作失败
            }
        }).catch((err) =>{
            console.log("网络错误", err);  
        })
    })
}