README
@lx-frontend/ajax
一个规范Ajax使用的框架
安装
使用npm:
npm install @lx-frontend/ajax
使用yarn:
yarn add @lx-frontend/ajax
Example
// 请求库实例
import axios from 'axios';
import Ajax from '@lx-frontend/ajax';
// rest配置
const rest = {
firstModule: {
getCall: ['get', '/the/request/url', requestOptions],
postCall: ['post', '/the/post/url', requestOptions]
}
}
// 实例化配置
const options = {
rest,
baseUrl
}
// 实例化
const ajax = new Ajax(options)
完成Ajax实例化之后,即可使用如下方式发起请求:
ajax.$rest.firstModule.getCall().then(res => {/***/})
ajax.$rest.firstModule.postCall(data).then(res => {/***/})
options配置
// const ajax = new Ajax(options)
{
rest
baseUrl
// boolean,是否发送FormData类型的数据,如果为true,则会将data数据转化成FormData形式,且修改请求头header中的Content-Type字段,默认为false,发送json数据
sendFormData
// wx/node/browser 如果是node或browser可以省略该参数
// 如果是wx,则必须带上该参数,且需要将wx对象传递给engine
envType,
// 发起请求的引擎,node和browser不需要该参数
// 微信环境则需要将微信引擎对象传递给该属性,配合envType使用
engine,
// ... 其他axios支持的所有配置
}
rest
该框架要求所有请求必须属于一个模块,rest对象的每个属性则代表一个模块,模块下是具体的请求函数配置。
rest的配置遵循如下模式:
{
moduleName: {
funcName: [method, url, requestOptions]
// ...
}
// ...
}
例如:
如下rest配置中,firstModule
是模块名称,该模块下有两个名为getCall
和postCall
的请求
const rest = {
firstModule: {
getCall: ['get', '/the/request/url', {/* requestOptions */}],
postCall: ['post', '/the/post/url', {/* requestOptions */}]
}
}
rest的结构决定了Ajax在实例化之后的调用方式,比如,getCall
和postCall
将通过如下方式调用:
// const ajax = new Ajax(options)
// 实例化之后,请求函数组成的模块将被挂载到 $rest 属性下
ajax.$rest.firstModule.getCall().then(/***/)
ajax.$rest.firstModule.postCall().then(/***/)
请求配置 [method, url, requestOptions]
模块下具体的请求通过一个三元数组配置而来,数组项分别表示:请求的方法,请求的路径,以及对请求的配置。
method: string类型,目前仅支持get, put, post, patch, delete方法
url: string类型,该路径将和requestOptions的baseUrl属性拼接,组成最终的请求路径。
requestOptions: object, 详见requestOptions
requestOptions
requestOptions的参数有两种类型
- 初始化参数中,除rest,engineType,engine之外的参数,如果和初始化参数重复,则这里的优先级最高
- 任何自定义的参数,该参数会被携带在请求响应response中,可以通过该参数在拦截器中执行任何逻辑
{
baseUrl,
sendFormData,
// ...
}
ajax实例方法
// 实例化
const ajax = new Ajax(options)
ajax.extend(obj) // 直接将obj上的属性赋值到ajax对象上
ajax.extendRest(mod) // 扩展$rest对象,mod的配置格式见rest对象下的属性
在Vue中使用
import Ajax from '@lx-frontend/ajax'
const ajax = new Ajax(options)
Vue.use(Ajax)
const app = new Vue({
ajax,
// ...
})
插件的作用是,声明了一个全局的mixin,在应用始化阶段,获取ajax.$rest,并将将其挂载到Vue.prototype上,方便在页面组件中以this.$rest的方式获取ajax上的请求方法。