diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 2b14b63..07f46fa 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -113,12 +113,14 @@ function sidebar() { { text: '进阶', items: [ + { text: '中间件', link: '/advanced/middleware' }, { text: '请求拦截器', link: '/advanced/request-interceptor' }, { text: '响应拦截器', link: '/advanced/response-interceptor' }, { text: '取消请求', link: '/advanced/cancel' }, { text: '创建实例', link: '/advanced/instance' }, - { text: '派生领域', link: '/advanced/fork' }, + { text: '扩展实例', link: '/advanced/extend' }, { text: '平台适配器', link: '/advanced/adapter' }, + { text: '派生领域(即将废弃)', link: '/advanced/fork' }, ], collapsed: false, }, diff --git a/docs/pages/advanced/extend.md b/docs/pages/advanced/extend.md new file mode 100644 index 0000000..3f31735 --- /dev/null +++ b/docs/pages/advanced/extend.md @@ -0,0 +1,255 @@ +--- +title: 扩展实例 +--- + +# {{ $frontmatter.title }} + +::: tip {{ $frontmatter.title }} +扩展新的实例，复用拦截器、中间件。 +::: + +## 扩展实例 + +可以基于 `axios` 扩展实例，配置项 `baseURL` 传相对地址时会和 `axios.defaults.baseURL` 一起组合成完整的服务端地址。 + +全局默认配置 `axios.defaults` 和扩展实例时传入的配置 `config` 将会按优先级[合并](/basics/defaults#配置合并策略)成实例默认配置 `instance.defaults`。 + +```ts +import axios from 'axios-miniprogram'; + +axios.defaults.baseURL = 'https://api.com'; + +// 相对地址会进行组合 +// baseURL 最终结果为 https://api.com/uesr +const instance = axios.extend({ + baseURL: 'user', + headers: { + common: { + ['Content-Type']: 'application/json', + }, + post: { + ['Content-Type']: 'application/x-www-form-urlencoded', + }, + }, + timeout: 1000, +}); + +// 绝对地址会直接使用 +// baseURL 最终结果为 https://api2.com/user +const instance = axios.extend({ + baseURL: 'https://api2.com/user', + headers: { + common: { + ['Content-Type']: 'application/json', + }, + post: { + ['Content-Type']: 'application/x-www-form-urlencoded', + }, + }, + timeout: 1000, +}); +``` + +## 默认配置 + +可以设置配置项默认值。 + +```ts +import axios from 'axios-miniprogram'; + +axios.defaults.baseURL = 'https://api.com'; + +const instance = axios.extend({ + baseURL: 'user', +}); + +instance.defaults.headers.common['Content-Type'] = 'application/json'; +instance.defaults.timeout = 1000; +``` + +## 添加拦截器 + +可以添加实例的[请求拦截器](/advanced/request-interceptor)和[响应拦截器](/advanced/response-interceptor)。 + +```ts +import axios from 'axios-miniprogram'; + +const instance = axios.extend({ + baseURL: 'test', +}); + +// 请求拦截器 +instance.interceptors.request.use( + function (config) { + console.log('instance request'); + return config; + }, + function (error) { + // 对请求错误做些什么 + return Promise.reject(error); + }, +); + +// 响应拦截器 +instance.interceptors.response.use( + function (response) { + console.log('instance response'); + return response; + }, + function (error) { + // 在 catch 之前做些什么 + return Promise.reject(error); + }, +); + +// instance request -> instance response +instance('/'); +``` + +也可以复用拦截器。 + +```ts +import axios from 'axios-miniprogram'; + +axios.defaults.baseURL = 'https://api.com'; + +const parent = axios.extend({ + baseURL: '/parent', +}); +const child = parent.extend({ + baseURL: '/child', +}); + +// 请求拦截器 +axios.interceptors.request.use( + function (config) { + console.log('axios request'); + return config; + }, + function (error) { + // 对请求错误做些什么 + return Promise.reject(error); + }, +); + +// 响应拦截器 +axios.interceptors.response.use( + function (response) { + console.log('axios response'); + return response; + }, + function (error) { + // 在 catch 之前做些什么 + return Promise.reject(error); + }, +); + +// axios request -> https://api.com/parent/child/ -> axios response +child('/'); + +// 请求拦截器 +parent.interceptors.request.use( + function (config) { + console.log('parent request'); + return config; + }, + function (error) { + // 对请求错误做些什么 + return Promise.reject(error); + }, +); + +// 响应拦截器 +parent.interceptors.response.use( + function (response) { + console.log('parent response'); + return response; + }, + function (error) { + // 在 catch 之前做些什么 + return Promise.reject(error); + }, +); + +// axios request -> parent request -> https://api.com/parent/child/ -> parent response -> axios response +child('/'); + +// 请求拦截器 +child.interceptors.request.use( + function (config) { + console.log('child request'); + return config; + }, + function (error) { + // 对请求错误做些什么 + return Promise.reject(error); + }, +); + +// 响应拦截器 +child.interceptors.response.use( + function (response) { + console.log('child response'); + return response; + }, + function (error) { + // 在 catch 之前做些什么 + return Promise.reject(error); + }, +); + +// axios request -> parent request -> child request -> https://api.com/parent/child/ -> child response -> parent response -> axios response +child('/'); +``` + +## 使用 + +使用方式和 `axios` 完全一致。 + +```ts +const instance = axios.extend({ + baseURL: 'https://api.com', +}); + +instance('test') + .then((response) => { + // 请求成功后做些什么 + }) + .catch((error) => { + // 请求失败后做些什么 + }); + +instance('test', { + method: 'POST', +}) + .then((response) => { + // 请求成功后做些什么 + }) + .catch((error) => { + // 请求失败后做些什么 + }); + +instance({ + url: 'test', + method: 'POST', +}) + .then((response) => { + // 请求成功后做些什么 + }) + .catch((error) => { + // 请求失败后做些什么 + }); +``` + +也可以使用请求方法简化请求。 + +- [instance.request(url, config?) | instance.request(config)](/basics/request) +- [instance.options(url, config?)](/method/OPTIONS) +- [instance.get(url, params?, config?)](/method/GET) +- [instance.head(url, params?, config?)](/method/HEAD) +- [instance.post(url, data?, config?)](/method/POST) +- [instance.put(url, data?, config?)](/method/PUT) +- [instance.patch(url, data?, config?)](/method/PATCH) +- [instance.delete(url, params?, config?)](/method/DELETE) +- [instance.trace(url, config?)](/method/TRACE) +- [instance.connect(url, config?)](/method/CONNECT) diff --git a/docs/pages/advanced/fork.md b/docs/pages/advanced/fork.md index 149e943..4d5b10b 100644 --- a/docs/pages/advanced/fork.md +++ b/docs/pages/advanced/fork.md @@ -8,6 +8,10 @@ title: 派生领域 派生新的领域简化 `URL`。 ::: +::: warning 注意 +该接口即将废弃，请使用功能更强的[扩展实例](./extend)。 +::: + ## 派生领域 可以基于 `axios` 派生领域，配置项 `baseURL` 传相对地址时会和 `axios.defaults.baseURL` 一起组合成完整的服务端地址。 diff --git a/docs/pages/advanced/instance.md b/docs/pages/advanced/instance.md index f59152c..e105aff 100644 --- a/docs/pages/advanced/instance.md +++ b/docs/pages/advanced/instance.md @@ -6,7 +6,6 @@ title: 创建实例 ::: tip {{ $frontmatter.title }} 创建新的实例。 - ::: ## 创建实例 @@ -83,25 +82,25 @@ instance.interceptors.response.use( ); ``` -## 派生领域 +## 扩展实例 -可以基于实例[派生领域](/advanced/fork)。 +可以基于实例[扩展实例](/advanced/extend)。 -实例默认配置 `instance.defaults` 和派生领域时传入的配置 `config` 将会按优先级[合并](/basics/defaults#配置合并策略)成领域默认配置 `domain.defaults`。 +实例默认配置 `parent.defaults` 和派生领域时传入的配置 `config` 将会按优先级[合并](/basics/defaults#配置合并策略)成新实例默认配置 `child.defaults`。 ```ts import axios from 'axios-miniprogram'; -const instance = axios.create({ +const parent = axios.create({ baseURL: 'https://api2.com', }); -const domain = instance.fork({ +const child = instance.extend({ baseURL: 'user', }); // 请求的服务端地址 https://api2.com/uesr -domain.get('/'); +child('/'); ``` ## 使用 @@ -109,8 +108,10 @@ domain.get('/'); 使用方式和 `axios` 完全一致。 ```ts +import axios from 'axios-miniprogram'; + const instance = axios.create({ - baseURL: 'https://api2.com', + baseURL: 'https://api.com', }); instance('test') diff --git a/docs/pages/advanced/middleware.md b/docs/pages/advanced/middleware.md new file mode 100644 index 0000000..f6053e4 --- /dev/null +++ b/docs/pages/advanced/middleware.md @@ -0,0 +1,30 @@ +--- +title: 中间件 +--- + +# {{ $frontmatter.title }} + +::: tip {{ $frontmatter.title }} +洋葱模型中间件。 +::: + +```ts +import axios from 'axios-miniprogram'; + +axios.use(async (ctx, next) => { + console.log('start1'); + await next(); + console.log('end1'); +}); + +axios.use(async (ctx, next) => { + console.log('start2'); + await next(); + console.log('end2'); +}); + +// start1 -> start2 -> /test -> end2 -> end1 +axios('/test'); +``` + +未完待续。。。 diff --git a/src/core/Axios.ts b/src/core/Axios.ts index 00c9618..55a198e 100644 --- a/src/core/Axios.ts +++ b/src/core/Axios.ts @@ -1,4 +1,3 @@ -import { combineURL } from '../helpers/combineURL'; import { isString } from '../helpers/isTypes'; import { dispatchRequest } from '../request/dispatchRequest'; import { CancelToken } from '../request/cancel'; diff --git a/src/core/MiddlewareManager.ts b/src/core/MiddlewareManager.ts index 3ad2891..f90f3be 100644 --- a/src/core/MiddlewareManager.ts +++ b/src/core/MiddlewareManager.ts @@ -1,6 +1,5 @@ import { assert } from '../helpers/error'; -import { combineURL } from '../helpers/combineURL'; -import { isFunction, isString } from '../helpers/isTypes'; +import { isFunction } from '../helpers/isTypes'; import { AxiosRequestConfig, AxiosResponse } from './Axios'; export interface MiddlewareNext {