常见的异步请求接口方法的总结

前后端分离项目中接口调用是页面中处理比较多的地方，vue官方文档推荐采用axios库进行接口调用，之前在项目中采用fetch、vue-resource, fetch库没有做拦截器处理，vue-resource文档虽然加了拦截器，但没有axios库使用方便（vue-resource不可以实例化、基于vue），下面简单介绍下axios的基本使用方法： 看一个最基本的axios请求示例：

import Vue from 'vue'
import axios from 'axios'

let instance = axios.create({
  timeout: 10000,
  validateStatus: function (status) {
    return status == 200
  },
  data: {
    token: sessionStorage.token || '',
  },
  params: {
    token: sessionStorage.token || '',
  }
})

instance.interceptors.response.use(function (response) {
    // Do something with response data
    let data = response.data.data;
    return data
  }, function (error) {
    // Do something with response error
    $notify(notifyMessage('error',error.message))
})

Vue.prototype.$get = window.$get = instance.get
Vue.prototype.$post = window.$post = instance.post

以上代码实例化了一个axios实例，限制请求的时长为10s，请求的data和param中都带了token参数，同时只返回状态码为200的数据，状态码不为200的添加提醒。

接下来看下在页面中如何调用接口的:

$get(url).then()
$post(url,data).then()

目前流行的异步请求比较流行的库都是基于promise的，返回的值是promise实例，可以采用then/catch进行数据的处理，也可以而借助async/await按照同步来获取数据，具体方式看个人喜好吧，不熟悉异步请求的童鞋可以看下之前写的一篇：谈谈promise 、generator、async三者之间的关系