浅浅初识一下alova吧

alova是什么呢？

可能你并没有听说过alova，但是你一定知道axios，通俗的来讲，alova就是axios的升级版，根据官网的说法，alova--轻量级的请求策略库，alova用于解决不同请求场景下的请求策略，从而提升项目的可用性和流畅性，降低服务器端的压力，让应用具备卓越的战略思维。

为什么是alova？

既然已经存在axios，为什么还会有alova呢，其实就是为了使数据请求更加的简单便捷，代码实现更加简单，数据交互更加的流畅！！！具体来讲alova具有与axios相似的api设计，但是在axios的基础上提供了更多的高性能请求策略，让应用更加流畅，同时相比于axios它的体积很小，只有axios的30%，除此之外，alova同时支持vue，react，svelte多个框架，并且具备丰富的扩展功能，可以自定义请求适配器、存储适配器、中间件，以及 states hook，alova还有许多丰富特性，使满足大部分的请求需求，这里简单讲了一点，想要了解更多，可以去官网查看噢。

了解一下alova实例吧

Alova实例创建

alova实例是使用的开端，一个项目的所有请求，都从它开始，alova实例请求和axios很像。

先来浅看一下，一个基础的axios实例创建吧

import axios from 'axios'

const Service=axios.create({
  baseURL:'http://localhost:3001/api',
  timeout:5000,
  headers:{
    "Content-Type":"application/json;charset=utf-8"
  }
})

接下来来看一下一个简单alova实例的创建

import { createAlova } from 'alova';
import GlobalFetch from 'alova/GlobalFetch';
import VueHook from 'alova/vue';

const alovaInstance = createAlova({
  baseURL: 'http://localhost:3001/api',
  statesHook: VueHook,
  requestAdapter: GlobalFetch()   //默认值
});

这个alova实例中指定了三个参数

• baseURL：可选参数，和axios一样表示请求的根路径，项目中通过alova实例发送的请求，拼接在baseURL后面即可。
• statesHook：必选参数，它用于确定在use hook应该如何返回状态化数据，就是帮我们创建不同的框架，并且可以被alova管理的状态，目前只提供了支持的三个框架的，分别是VueHook，ReactHook，和SvelteHook， 如上代码中使用的就还是VueHook
• requestAdapter：必选参数，请求适配器，用于所有的发送请求，，如上代码使用的是默认的GlobalFetch,由window.fetch提供请求支持。

全局请求&响应拦截器

请求拦截器--与axios相似在请求前被触发，一个项目中，一般添加一些数据到请求头，在请求拦截器中设置一些统一参数，使项目具有相同的请求配置。

看看代码实例吧

const alovaInstance = createAlova({   
    beforeRequest(method) {  
    // 假设我们需要添加token到请求头  
    method.config.headers.token = 'token';  
    }  
});

//利用async&&await实现异步操作
const alovaInstance = createAlova({  
// ...  
async beforeRequest(method) {  
 //异步任务
}  
});

响应拦截器--也是和axios相似，需要统一响应处理数据时，在响应拦截器中配置相应的请求成功拦截器，请求失败拦截器。

看看代码示例吧

const alovaInstance = createAlova({  
responded: {  
// 请求成功的拦截器  
onSuccess: async (response, method) => {  
if (response.status >= 400) {  
throw new Error(response.statusText);  
}  
const json = await response.json();  
    if (json.code !== 200) {  
        // 抛出错误或返回reject状态的Promise实例时，此请求将抛出错误  
        throw new Error(json.message);  
        }   
    return json.data;  
},  
  // 请求错误时将会进入该拦截器。   
onError: (err, method) => {  
        alert(error.message);  
        }  
    }  
});

如上代码，请求成功拦截器，使用GlobalFetch请求适配器时，第一个参数接收Response对象 ，二个参数为当前请求的method实例，你可以用它同步请求前后的配置信息 ，请求失败拦截器， 第二个参数为当前请求的method实例，你可以用它同步请求前后的配置信息 。