Tips on axios

什么是 axios

• axios 是一个基于 Promise 的，为浏览器和 Node.js 设计的 HTTP 客户端。它尽可能简化封装了 HTTP 相关的各种操作，在 Web App 中使用非常方便。
• Vue 2 官方建议在由 Vue 构建的 SPA 中使用 axios 进行 HTTP 操作。
• 传送门：mzabriskie/axios

基本用法

• 初始化一个 axios 实例

  const ajaxInstance = axios.create({
      baseURL: url,
      timeout: 30000 // 30 seconds.
  });
  

• GET .get(url, [conf])

  ajaxInstance.get('/job/joblist', {
      params: {
          user: store.state.auth.username
      }
  }).then((response) => {
      if (response.status === 200) {
          return true;
      } else {
          console.log(response.status);
          return false;
      }
  }).catch((error) => {
      console.error(error);
      return false;
  });
  

• POST Params .post(url, [data, [conf]])

  ajaxInstance.post('/auth/userLogin', {}, {
      params: {
          username: user.username,
          password: user.password
      },
  }).then((response) => {
      // if auth success. then ->
      console.log(response); // for test only
      console.log(response.data.Login;
      if((response.data.Login === 0)) { // login success
          return true;
      } else {
          return false;
      }
  }).catch((error) => {
      console.error(error);
      return false;
  });
  

• POST JSON

  ajaxInstance.post('/auth/userLogin', {
      username: '',
      password: ''
  }).then((response) => {
      // if auth success. then ->
      console.log(response); // for test only
      console.log(response.data.Login;
      if((response.data.Login === 0)) { // login success
          return true;
      } else {
          return false;
      }
  }).catch((error) => {
      console.error(error);
      return false;
  });
  

• POST 表单（ FormData ）

  let data = new FormData();
  data.append('upload_file', file);
  data.append('path', store.state.dataPreview.path);
  data.append('user', store.state.auth.username);
  return ajaxInstance.post('/action/upload', data).then((response) => {
      if (response.data === 'success') {
          return true;
      } else {
          console.log(response.data);
          return false;        
      }
  }).catch((error) => {
      console.error(error);
      return false;
  });
  

遇到的问题

1. 如何在 SPA 中封装 axios 以供组件使用：

   • 首先，直接在组件中进行 HTTP Request 是不合理的，因为维护起来不方便，也不利于代码复用。

   • 可以封装一个全局 util 类，实例化一个 axios 对象，涉及与 axios 相关的操作的函数都放在这个类中，组件通过引用这个类并调用相关函数来发起 HTTP Request 。

   • 要注意的是，如果需要用到 Promise 的异步特性，通过异步返回值控制视图，以实现友好的界面交互 / 提示（或者其他目的），一定要将整个 axios 返回（其实就是返回一个 Promise），而不是只返回某个结果值(可以参考上述代码中 POST 表单的部分)。然后再利用 Promise 异步处理返回的结果即可。

     // util 中的 submit 函数
     
     const submitTask = (taskInfo, file) => {
         let data = new FormData();
         data.append('job', JSON.stringify(taskInfo));
         data.append('user', store.state.auth.username);
         data.append('job_file', file);
         return ajaxInstance.post('/job/start_job', data).then((response) => {
             console.log(response);
             if (response.data === 'success') {
                 return true;
             } else {
                 return false;
             }
         }).catch((error) => {
             console.error(error);
             return false;
         });
     }
     

     // submit 页面
     
     util.submitTask(taskInfo, this.newFile).then((res) => {
         if (res) {
             this.$Message.success('已提交。');
             cleanSubmit();
         } else {
             this.$Message.error('提交失败。');
             cleanSubmit();
         };
     })
     

2. 如何提交表单：
   • 提交表单时一定要使用 FromData 对象手动生成一个表单，并把 FormData 当做 data 传递给 axios ，axios 会自动识别 data 的类型并设置好相应的 Request Header 。提交文件只需要将文件对象 append 到表单中即可。