Skip to content

Latest commit

 

History

History
245 lines (187 loc) · 5.79 KB

README.md

File metadata and controls

245 lines (187 loc) · 5.79 KB
Raw

ioxx

一个可以让你更加简单的进行AJAX请求的工具, 基于axios

项目地址：https://github.com/ccwq/ioxx

  • 特点

    • 语义化的请求方式

      //伪代码

      ioxx.请求的路径.请求方式(发送数据).then(结果=>{
    //处理结果
})

      使用async/await，代码更加简洁

      let 请求结果 = await ioxx.请求路径.请求方式(发送数据)

    • 拥有功能强大的拦截器特性，按照请求的地址进行拦截

      //响应之后对axios的响应数据进行读取/修改/延迟
ioxx.addInterceptors("user/info", resp=>{
    store.commit("setUser", resp.data);
})

//同时拦截请求和相应
ioxx.addInterceptors("user/info", {
    before(config){
        //请求延迟，等待十秒后，才进行请求
        return new Promise(resolve=>{
            setTimeout(10000, resolve, config);
        })
    },
    after(response){
        //响应延时并修改相应内容
        return new Promise(resolve=>{
            setTimeout(10000, _=>{
                //对response进行一些耗时的操作
                resolve(response);
            });
        })
    }
}) 

//支持使用正则添加拦截
ioxx.addInterceptors(/^user/, {...others});

    • 请求代码数量缩减

      axios({
    url,
    method,
    data:{
        id
    }
})

      ioxx.url.method({id})

      两者比较之下，ioxx可以做到更加简洁 由于基于axios，ioxx也可以直接使用axios的方式进行请求

      ioxx.$(axiosOptions)

    • 开箱即可请求 application/x-www-form-urlencoded 形式的数据，不知道最新版的这样，以前使用axios必须得加一堆配置，才可以是使用

  • 安装

    npm install --save ioxx

    或者

    yarn add ioxx

  • 配置示例/可以0配置

    //request.js
import Ioxx from "src/libs/ioxx";
export default Ioxx.create({

    //不解释
    baseURL: config.baseURL,

    //相应之后的配置
    afterResponse(response){
    
        //如果相应的status不为空,就认为相应出错，抛出错误
        if(response.data.status){
            return Promise.reject(response);
        }
    },

    //请求之前的配置
    beforeRequest(config){
           
        //请求发送之前，为每个请求加上token
        config.headers.token = token;
        return config;
    },
}, axiosOptions)

  • 使用

    import ioxx from "path/to/request.js"

/**
* 使用get方式请求 "user/info" 接口
*/
ioxx.userInfo({
    headers:{
        token
    },
    params: {
        id
    }
});
//或者
ioxx.userInfo.get({id})

//或者
ioxx.userInfo("get", {id})

//新增的
ioxx.$user_info(config)

//
ioxx.$user_info.get({id}, config)


//2019年08月22日 新增
ioxx.get("path/foo/bar", {id}, {headers});

ioxx.get("path/foo/bar", {params:{id}, headers}, true);

ioxx.post("path/foo/bar", {id}, {headers})

ioxx.post("path/foo/bar", {data:{id}, headers}, true);



/**    
* 使用post请求登录到 user/auth/login
*/
ioxx.userAuthLogin.post({userName, password})

//或者
ioxx.userAuthLogin("post", {userName, password})
ioxx.$user_auth_login.post({userName, passwd})


//或者
ioxx.userAuthLogin({
    method: "post",
    data: {userName, password},
})

//或者
ioxx.userAuthLoginPost({
    data: {userName, password},
})
ioxx.$user_auth_login({
    data: {userName, password},
})

    拦截器功能请查看特点介绍部分

  • 特殊情况

    • 请求的地址有大写如 "superUser/login"

      通用解决方式

          ioxx.$({
        url:"sperUser/login"
    })

    //或者
    ioxx["$superUser/login"](axiosConfig);

      也可以使用转义方式避免User的U被识别为路径分割

      ioxx.superUUserLogin()

文档

  • $转义的使用

    1.以$开头的方法会遵循另外一套简单的规则，如下

    ioxx.$user_delete.post(); 
//{url:"user/delete", method:"post"}

ioxx.$super$_user_Post()
//{url:"super_user/Post"}

    总结，所有_会转换为路径切割(除了$_)

    1. 放在大写字母前面会阻止大写字母被转义为路径分割
    ioxx.superUserDelete()
//{url:"super/user", method:"delete"}

    此时如果想要请求的地址是 "super/userDelete",可以使用 $ 转义

    ioxx.superUser$Delete();
//也可以使用ioxx.superUserDDelete()//重复出现两次的大写字母会被缩减为1个
    1. 强制切割路径，放在非大写字母前面(包括小写字母，数字，下连字符)，会转换为一个连字符
    ioxx.superUser$delete.post() // {url:"super/user/delete", method:"post"}

历史

1.8.0 拦截器增加正则模式

ioxx.addInterceptors(/^user/, config=>{
    //所有以user开头的请求会进入到这里// 
})