![\"logo\"](\"https://www.anyup.cn/static/anyup/images/logo.png\"){kind=logo}
\n\n \n
🔥 一个基于 promise 的，轻量且强大的 http 网络库
\n\n\n 🔥 文档网站\n
\n\n## 一. 简介\n\n🚀 基于 `Promise` 的 `uni.request` ，轻量且强大的 `http` 网络库，特性：\n\n1. 提供统一的 `Promise API`\n2. 基于 `uni.request`，支持多种运行环境，浏览器 H5、小程序、APP 等\n3. 支持发起 `GET`、`POST`、`PUT`、`DELETE`、`upload` 请求\n4. 支持请求／响应拦截器\n5. 支持请求的 `header`\n6. 支持处理请求的 `loading` 状态\n7. 支持对请求结果进行统一处理\n8. 支持链式调用\n9. 支持批量生成 API 请求，简化代码量 99.9%，一行代码搞定繁琐的请求 function\n\n## 二. 安装\n\n```bash\nnpm install @anyup/uni-http -S\n```\n\n## 三. 快速上手\n\n```javascript\nimport { Http, HttpHeader } from \"@anyup/uni-http\";\n\nconst http = new Http();\n// 仅为示例 API 域名，使用时替换自己的接口域名即可\nconst baseURL = \"https://demo.api.com\";\n// 设置header\nconst header = { \"Content-Type\": \"application/json;charset=UTF-8\" };\n\n// 设置 baseURL 和 header，支持链式调用\nhttp.setBaseURL(baseURL).setHeader(header);\n\n// 设置请求拦截器\nhttp.interceptors.request.use(\n (request) => {\n if (request.loading) {\n // 如果配置了loading，请求开始需要显示\n }\n // 设置请求header\n request.header[\"Authorization\"] = \"\";\n return request;\n },\n (error) => Promise.resolve(error)\n);\n// 设置响应拦截器\nhttp.interceptors.response.use(\n (response) => {\n // 请求成功\n if (!response.data) {\n return Promise.reject(new Error(\"接口请求未知错误\"));\n }\n // 其他业务处理\n return Promise.resolve(response);\n },\n (error) => {\n // 请求失败，业务处理\n return Promise.reject(error);\n },\n (complete) => {\n // 请求完成\n if (complete.request.loading) {\n // 如果配置了loading，请求完成需要关闭\n }\n // 其他业务处理\n console.log(\"complete\", complete);\n }\n);\n\n// 登录请求示例，并配置请求时显示loading\nfunction requestLogin(username, password) {\n http\n .request({\n url: \"/api/login\",\n data: { username, password },\n method: \"POST\",\n loading: true\n })\n .then((res) => {\n // 处理 response 响应\n if (res.status === 1) {\n console.log(res);\n }\n });\n}\n\n// 直接使用 get|post|put|delete 方式请求\nfunction requestLogin1(username, password) {\n // 也可以直接使用 post 方法\n http\n .post(\"/api/login\", { username, password }, { loading: true })\n .then((res) => {\n // 处理 response 响应\n if (res.status === 1) {\n console.log(res);\n }\n });\n}\n\n// es6 await 风格 登录请求示例，使用 request 方式请求\nasync function requestLogin2(username, password) {\n const res = await http.request({\n url: \"/api/login\",\n data: { username, password },\n method: \"POST\",\n loading: true\n });\n // 处理 response 响应\n if (res.status === 1) {\n console.log(res);\n }\n}\n```\n\n## 四. 进阶使用\n\n> 工厂模式按配置表批量生成 API 方法库，体验飞一般的感觉\n\n### 1. 初始化 Http 类\n\n```javascript\n// http.js\nimport { Http } from \"@anyup/uni-http\";\n\nconst header = {};\nconst baseURL = \"\";\nconst http = new Http().setBaseURL(baseURL).setHeader(header);\n\n// 请求拦截器\nhttp.interceptors.request.use(\n (request) => {\n if (request.loading) {\n // 如果配置了loading，显示\n }\n // 设置请求header\n request.header[\"Authorization\"] = \"\";\n return request;\n },\n (error) => Promise.resolve(error)\n);\n// 响应拦截器\nhttp.interceptors.response.use(\n (response) => {\n // 请求成功\n if (!response.data) {\n return Promise.reject(new Error(\"接口请求未知错误\"));\n }\n // 其他业务处理\n return Promise.resolve(response);\n },\n (error) => {\n // 请求失败，业务处理\n return Promise.reject(error);\n },\n (complete) => {\n // 请求完成\n if (complete.request.loading) {\n // 如果配置了loading，关闭\n }\n // 其他业务处理\n console.log(\"complete\", complete);\n }\n);\n\nexport default new Http.Builder(http);\n```\n\n### 2. 定义接口配置\n\n```javascript\n// api.js\nimport http from \"./http\";\n\nconst urls = {\n // 用户\n login: { url: \"/api/login\", method: \"POST\", loading: true } // 用户登录\n};\n\nexport default http.dispatch(urls);\n```\n\n### 3. 在代码中使用\n\n```javascript\n// demo.vue\n