简介:
Vue.js 是一种流行的前端框架,而 Axios 是一种基于 Promise 的 HTTP 库,可以用来发送异步请求。在 Vue 开发中,互联网数据信息的请求是必不可少的操作。因此,将 Axios 封装成可重用的函数,可以在代码的可读性、可维护性和执行效率上都有很高的提升。本文将介绍如何使用Promise结合axios
来对接口进行封装成方法,并使用async/await
来调用封装后的函数来进行同步或异步请求。
封装Axios:
在Vue开发中,很多API都是需要网络请求来获取到数据的。我们可以使用Axios库来发送AJAX请求。然而,在每个组件和页面中单独处理每一个请求并不是一个好主意,而应该把网络请求的逻辑放到一个统一的地方,这里我们可以将Axios封装成一个JavaScript函数,返回Promise实例。
下面是封装XHR的示例代码:
import axios from 'axios';
const xhrRequest = (method, url, params = {}) => {
return new Promise((resolve, reject) => {
axios({
method: method,
url: url,
data: params
}).then((response) => {
const {data} = response;
if (data.error_code === 0) {
resolve(data.result || {});
} else {
reject(new Error(`服务端错误: code:${data.error_code}, msg:${data.msg}`));
}
}).catch(error => {
console.log(error);
reject(new Error('网络错误'));
})
});
};
在上面的代码中,我们将Axios的返回结果进行解构,判断data中的 error_code 是否为0,如果是,则使用 resolve(data.result || {})
将结果返回,否则通过 reject 方法返回一个包含错误信息的Error对象。这样做的好处是,在调用函数之后,可以根据 Promise 实例所执行的状态(resolved 或 rejected)来获取请求结果或者错误信息。
使用封装好的xhrRequest:
封装完之后,我们就可以在Vue开发中使用了。在本文的示例中,我们使用 async/await 来获取封装好的XHR数据。async/await 是ES6 标准中新增的语法,可以用于处理异步操作,使异步操作的写法更像同步操作。
下面是一个简单的示例代码,用于在 Vue 中发送 AJAX 请求并通过数据控制界面:
import { xhrRequest } from './api.js'
export default {
data() {
return {
result: {},
loading: false,
errorMsg: ''
}
},
methods: {
async getData() {
this.loading = true;
try {
const data = await xhrRequest('post', '/api/getData');
this.result = data;
} catch (error) {
this.errorMsg = error.message;
}
this.loading = false;
}
}
}
当然也可以使用axios的请求
const list = await this.getWarnStatis(code)
getWarnStatis(code) {
return new Promise((resolve, reject) => {
this.$http.post('url', {
code: code,
}).then((res) => {
let data = res.body
// data.type = order
// data.num = order
resolve(data)
}, (err) => {
reject(err)
})
})
},
在组件method中经过Async/Await进行封装后通过XHR方法来发送请求并获取数据,十分简洁方便。
我们假设我们的代码返回了一个JSON对象,展示代码如下:
{
"error_code": 0,
"result": {
"name": "李雷",
"age": 24,
"gender": "男"
}
}
注意事项:
在以上的示例当中,我们并没有对其中的错误信息进行处理。然而,在真实的项目中,错误处理是必须的。另外,在在进行网络请求时也应该将一些常用的配置(例如 baseURL、headers 等)放到单独的配置文件中,以便整个应用可以更方便地进行统一修改和管理。其中,请求头header使用时应注意遵守协议和相关规范,保证数据安全性。
结论:
本篇文章介绍了如何在Vue开发环境下使用Promise结合axios来对接口进行封装成方法,并使用async/await来调用封装后的函数来进行同步或异步请求。封装的好处在于会提高代码的可读性、可维护性和执行效率,同时也为我们的应用程序添加一个可扩展性和可重用的网络请求。