「揭秘」promise和axios封装请求模式

简介：

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来调用封装后的函数来进行同步或异步请求。封装的好处在于会提高代码的可读性、可维护性和执行效率，同时也为我们的应用程序添加一个可扩展性和可重用的网络请求。

「揭秘」promise和axios封装请求模式

猜你喜欢