用vue中的Promise封装axios并实现同步返回值

最新推荐文章于 2025-03-31 19:46:45 发布

HelloMyCode

最新推荐文章于 2025-03-31 19:46:45 发布

阅读量7.8k

点赞数 2

分类专栏：菜鸟成长文章标签： vue promise axios

本文链接：https://blog.youkuaiyun.com/HelloMyCode/article/details/96431367

版权

菜鸟成长专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何使用Promise来封装axios，以实现请求的同步返回值。通过创建axios.js文件统一处理请求，创建api.js存储后端接口路径，并在test.vue组件中应用。在使用async和await时，可以根据个人需求决定同步位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Promise封装axios(封装的方法网上很多，不详细写了)
可参考：
https://www.kancloud.cn/cooldrw2015/vue_2/1163405
https://www.jianshu.com/p/0229211ea679

/**
  * post方法，对应post请求
  * @param {String} url [请求的url地址]
  * @param {Object} params [请求时携带的参数]
  */
export function post(url, params) {
    return new Promise((resolve, reject) => {
          axios.post(url, QS.stringify(params))
        .then(res => {
            resolve(res.data);
        })
        .catch(err =>{
            reject(err.data)
        })
    });
}

我的实现步骤：
1.创建一个axios.js，以POST为例，在axios.js中统一请求路径：

export const postRequest = (url, params) => {
    return new Promise((resolve ,reject)=>{ 
       let res= axios({
            method: 'post',
            url: `${base}${url}`,
            data: JSON.stringify(params),
            dataType : "json",
            headers: {
                'Content-Type': 'application/json'
            }
        });
       resolve(res); //返回值
    });
};

2.创建api.js存放后台请求路径

// 引入axios.js
import {  postRequest} from ' axios.js文件路径 ';

//后台接口
export const getInfo = (params) => {
    return postRequest('/test/getInfo ',params)
}
export const getData = (params) => {
    return postRequest('/test/getData ',params)
}

3.创建test.vue

<style>
</style>
<template></template>
<script>
//引入api.js
import {
 //需要调用的方法名称，同api.js中的方法名称
       getInfo,
       getData
    }from ' api.js的文件路径 ';
 export default {
	name:"test",
	data(){
		return {
			info:"",
			data:""
		}
	},
	methods:{
		getInfo:function (params) {
              return getInfo(params); //定义方法时，直接return getInfo (params)
            },
         getData:function (params) {
              return getData(params); 
            }
	},
	//begin======【只能在这个区域内同步】=================================
	async created(){ //一定要用async和await
		let info=await this.getInfo(123);
		let data=await this. getData(info);
		//先执行getInfo方法，返回info的值后，再执行getData方法
	}，
	//end=============================================================
	我是别的方法(){
		//this.info的值仍然为“”
	}
}
</script>

注意：async和await同步的地方依据个人需求而定；也可以在methods中定义方法时写。
以上步骤是亲自采坑后总结的，希望能帮助到跟我有同样遭遇的序员们@_@