diff --git a/docs/pages/advanced/fork.md b/docs/pages/advanced/fork.md index 3b196b1..2857c29 100644 --- a/docs/pages/advanced/fork.md +++ b/docs/pages/advanced/fork.md @@ -4,4 +4,161 @@ title: 派生领域 # {{ $frontmatter.title }} -待续... +::: tip {{ $frontmatter.title }} +派生新的领域管理 `URL` 简化请求。 + +`defaults` 和派生 `domain` 时传入的 `config` 将会按优先级合并成 `domain.defaults`。 + +如果 `config.baseURL` 是一个相对地址,将会和 `defaults.baseURL` 组合成完整的服务端地址。 + +[合并策略](/basics/defaults#合并策略) +::: + +## 派生领域 + +可以传入 config 派生领域。 + +```ts +import axios from 'axios-miniprogram'; + +axios.defaults.baseURL = 'https://api.com'; + +const domain = axios.fork({ + baseURL: 'user', + headers: { + common: { + ['Content-Type']: 'application/json', + }, + post: { + ['Content-Type']: 'application/x-www-form-urlencoded', + }, + }, + timeout: 1000, +}); + +// 请求的服务端地址 https://api.com/uesr +domain.get('/'); +``` + +也可以使用绝对路径 `config.baseURL` 派生领域。 + +```ts +import axios from 'axios-miniprogram'; + +axios.defaults.baseURL = 'https://api.com'; + +const domain = axios.fork({ + baseURL: 'https://api2.com/user', + headers: { + common: { + ['Content-Type']: 'application/json', + }, + post: { + ['Content-Type']: 'application/x-www-form-urlencoded', + }, + }, + timeout: 1000, +}); + +// 请求的服务端地址 https://api2.com/uesr +domain.get('/'); +``` + +## 默认配置 + +可以设置 `domain.defaults` 属性默认值。 + +```ts +import axios from 'axios-miniprogram'; + +axios.defaults.baseURL = 'https://api.com'; + +const domain = axios.fork({ + baseURL: 'user', +}); + +domain.defaults.headers.common['Content-Type'] = 'application/json'; +domain.defaults.timeout = 1000; +``` + +## 拦截器 + +基于 `axios` 派生出的 `domain`,在发送请求时会使用 `axios` 的拦截器。 + +基于 `instance` 派生出的 `domain`,在发送请求时会使用 `instance` 的拦截器。 + +无法为 `domain` 单独添加拦截器。 + +## 使用 + +可以使用请求方法发送请求。 + +```ts +import axios from 'axios-miniprogram'; + +axios.defaults.baseURL = 'https://api.com'; + +const domain = axios.fork({ + baseURL: 'user', +}); + +// 请求的服务端地址 https://api.com/uesr/1 +domain + .get('/:id', { + id: 1, + }) + .then((response) => { + // 成功之后做些什么 + }) + .catch((error) => { + // 失败之后做些什么 + }); + +// 请求的服务端地址 https://api.com/uesr +domain + .post('/', { + id: 1, + name: 'user', + }) + .then((response) => { + // 成功之后做些什么 + }) + .catch((error) => { + // 失败之后做些什么 + }); + +// 请求的服务端地址 https://api.com/uesr/1 +domain + .put('/:id', { + name: 'user', + }) + .then((response) => { + // 成功之后做些什么 + }) + .catch((error) => { + // 失败之后做些什么 + }); + +// 请求的服务端地址 https://api.com/uesr/1 +domain + .delete('/:id', { + id: 1, + }) + .then((response) => { + // 成功之后做些什么 + }) + .catch((error) => { + // 失败之后做些什么 + }); +``` + +- [domain.request(url, config?) | instance.request(config)](/basics/request) +- [domain.options(url, config?)](/method/OPTIONS) +- [domain.get(url, params?, config?)](/method/GET) +- [domain.head(url, params?, config?)](/method/HEAD) +- [domain.post(url, data?, config?)](/method/POST) +- [domain.put(url, data?, config?)](/method/PUT) +- [domain.patch(url, data?, config?)](/method/PATCH) +- [domain.delete(url, params?, config?)](/method/DELETE) +- [domain.trace(url, config?)](/method/TRACE) +- [domain.connect(url, config?)](/method/CONNECT) diff --git a/docs/pages/advanced/instance.md b/docs/pages/advanced/instance.md index 8642950..829504e 100644 --- a/docs/pages/advanced/instance.md +++ b/docs/pages/advanced/instance.md @@ -4,4 +4,153 @@ title: 创建实例 # {{ $frontmatter.title }} -待续... +::: tip {{ $frontmatter.title }} +创建全新的 `instance` 实例。 + +`defaults` 和创建 `instance` 时传入的 `config` 将会按优先级合并成 `instance.defaults` 。 + +[合并策略](/basics/defaults#合并策略) +::: + +## 创建实例 + +可以使用 `axios.create(config)` 创建 `instance`。 + +```ts +import axios from 'axios-miniprogram'; + +const instance = axios.create({ + baseURL: 'https"//api2.com', + headers: { + common: { + ['Content-Type']: 'application/json', + }, + post: { + ['Content-Type']: 'application/x-www-form-urlencoded', + }, + }, + timeout: 1000, +}); +``` + +## 默认配置 + +可以设置 `instance.defaults` 属性默认值。 + +```ts +import axios from 'axios-miniprogram'; + +const instance = axios.create({ + baseURL: 'https"//api2.com', +}); + +instance.defaults.headers.common['Content-Type'] = 'application/json'; +instance.defaults.timeout = 1000; +``` + +## 添加拦截器 + +可以在 `instance`上添加 [请求拦截器](/advanced/request-interceptor) 和 [响应拦截器](/advanced/response-interceptor)。 + +```ts +import axios from 'axios-miniprogram'; + +const instance = axios.create({ + baseURL: 'https"//api2.com', +}); + +// 请求拦截器 +instance.interceptors.request.use( + function (config) { + // 在发送请求之前做些什么 + return config; + }, + function (error) { + // 对请求错误做些什么 + return Promise.reject(error); + }, +); + +// 响应拦截器 +instance.interceptors.response.use( + function (response) { + // 在 then 之前做些什么 + return response; + }, + function (error) { + // 在 catch 之前做些什么 + return Promise.reject(error); + }, +); +``` + +## 派生领域 + +可以基于 `instance` [派生领域](/advanced/fork)。 + +```ts +import axios from 'axios-miniprogram'; + +const instance = axios.create({ + baseURL: 'https"//api2.com', +}); + +const domain = instance.fork({ + baseURL: 'user', +}); + +// 请求的服务端地址 https://api2.com/uesr +domain.get('/'); +``` + +## 使用 + +使用方式和 `axios` 完全一致。 + +```ts +const instance = axios.create({ + baseURL: 'https"//api2.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/response-interceptor.md b/docs/pages/advanced/response-interceptor.md index 3a05f5d..acea047 100644 --- a/docs/pages/advanced/response-interceptor.md +++ b/docs/pages/advanced/response-interceptor.md @@ -7,7 +7,7 @@ title: 响应拦截器 ::: tip {{ $frontmatter.title }} 用于 `response` 到达 `then` 之前,或 `error` 到达 `catch` 之前拦截响应。 -通常会用于处理错误,但对于处理错误而言,使用 `errorhandler` 会是更好的选择。 +通常会用于处理错误,但对于处理错误而言,使用 `errorHandler` 会是更好的选择。 ::: ## 添加响应拦截器 diff --git a/docs/pages/basics/defaults.md b/docs/pages/basics/defaults.md index 357b48f..0ff870e 100644 --- a/docs/pages/basics/defaults.md +++ b/docs/pages/basics/defaults.md @@ -6,11 +6,13 @@ title: 默认配置 ::: tip {{ $frontmatter.title }} 默认配置 `defaults` 会作用于每个请求。 + +[合并策略](/basics/defaults#合并策略) ::: ## 默认值 -在不更改默认配置 `defaults` 的情况下,它依然会存在一些默认值,在 [defaults.ts](https://github.com/zjx0905/axios-miniprogram/blob/main/src/defaults.ts) 中定义,大概长下面这样。 +在不更改 `defaults` 的情况下,它依然会存在一些默认值,在 [defaults.ts](https://github.com/zjx0905/axios-miniprogram/blob/main/src/defaults.ts) 中定义,大概长下面这样。 ```ts { @@ -68,7 +70,7 @@ axios.defaults.headers.common['Content-Type'] = 'application/json'; // POST 方法请求头 axios.defaults.headers.post['Content-Type'] = - 'applicatioapplication/x-www-form-urlencoded'; + 'application/x-www-form-urlencoded'; // 超时时间 axios.defaults.timeout = '60000'; @@ -121,7 +123,7 @@ axios.defaults.forceCellularNetwork = false; ## 设置自定义属性 -也可以给自定义属性设置默认值,实现一些自定义功能。 +也可以给自定义属性设置默认值,从而实现一些自定义功能。 ```ts import axios from 'axios-miniprogram'; @@ -165,7 +167,7 @@ axios.interceptors.response.use((response) => { ## 合并策略 -在发送请求时,默认配置 `defaults` 和请求配置配 `config` 将会按优先级进行合并。 +`defaults` 和 `config` 将会按优先级进行合并。 其中 `url/method/data/upload/download` 只从 `config` 取值,`headers/params` 进行深度合并,其余属性则会优先从 `config` 取值。