使用axios发送http请求修改Promise风格

Javascript在es6支持了Promise对象。也可以理解为异步对象。

在react中，通常使用axios发送一个请求大致如下

axios.get(`https://api.github.com/search/users?q={keyWord}`).then(
            response => {console.log('成功了',response.data);},
            error => {console.log('失败了',error);}
)

但是这种方式请求有弊端，比如请求发送接收的等待时间浪费了，所以为了更好优化，通常在引入http请求库的时候，会使用Promise方式修改。

以我目前在使用的react框架为例，我一般会在src目录下创建utils目录，并创建一个类似request.js或server.js的文件。

import axios from 'axios';
import qs from 'qs';

const http = {
  post: '',
  get: '',
};

http.post = function (api, data) {
  const params = qs.stringify(data);
  return new Promise((resolve, reject) => {
    axios.post(api, params).then(res => {
      resolve(res);
    });
  });
};

http.put = function (api, data) {
  const params = qs.stringify(data);
  return new Promise((resolve, reject) => {
    axios.put(api, params).then(res => {
      resolve(res);
    });
  });
};

http.get = function (api, data) {
  const params = qs.stringify(data);
  return new Promise((resolve, reject) => {
    axios.get(api, params).then(res => {
      resolve(res);
    });
  });
};

export default http;

在项目中，假如我一开始就需要发送请求渲染页面，那么我只要如下这样既可。

  // 先行引入库文件
  import http from '../../../../utils/server';

  // 页面渲染完毕后执行
  componentDidMount() {
    this.getTableData();
  }
  ...
    // 页面初始化获取数据
  async getTableData() {
    // /api/admin_audit_platform_json
    const res = await http.get(
      '/server/admin_audit_platform_json/?format=json',
      {},
    );
    const ajaxData = [];
    for (let i = 0; i < res.data.data.length; i++) {
      ajaxData.push({
        key: res.data.data[i].id,
        game: res.data.data[i].game,
        audit_type_name: res.data.data[i].audit_type_name,
        audit_level: res.data.data[i].audit_level,
        create_time: res.data.data[i].create_time,
        audit_info: res.data.data[i].audit_info,
        warningType: res.data.data[i].audit_level,
      });
    }
    this.setState({
      audioData: ajaxData,
    });
  }