From e01118631be2b63e63970dc10e1188ecab0b3546 Mon Sep 17 00:00:00 2001 From: pooya parsa Date: Sun, 24 Mar 2019 00:03:48 +0430 Subject: [PATCH] docs: basic migration from axios to http --- .github/ISSUE_TEMPLATE.md | 2 +- README.md | 20 +------------------- docs/README.md | 10 ++++------ docs/SUMMARY.md | 2 +- docs/extend.md | 14 +++++++------- docs/helpers.md | 38 +++++++++++++++++++------------------- docs/options.md | 16 ++++++++-------- docs/setup.md | 2 +- docs/usage.md | 8 ++++---- test/fixture/pages/ssr.vue | 8 ++++---- types/index.d.ts | 33 ++++++++++++++++----------------- types/vuex.d.ts | 4 ++-- 12 files changed, 68 insertions(+), 89 deletions(-) diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index 2ba1b77..ba5ac5f 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -1,7 +1,7 @@ diff --git a/README.md b/README.md index 9ab8b62..6729541 100755 --- a/README.md +++ b/README.md @@ -7,25 +7,7 @@ [![Dependencies][david-dm-src]][david-dm-href] [![Standard JS][standard-js-src]][standard-js-href] -TODO - -## ✅ Features - -✓ Automatically set base URL for client & server side - -✓ Exposes `setToken` function to `$axios` so we can easily and globally set authentication tokens - -✓ Automatically enables `withCredentials` when requesting to base URL - -✓ Proxy request headers in SSR (Useful for auth) - -✓ Integrated with Nuxt.js Progressbar while making requests (TODO) - -✓ Integrated with [Proxy Module](https://github.com/nuxt-community/proxy-module) - -✓ Auto retry requests - -📖 [**Read Documentation**](https://http.nuxtjs.org) (TODO) +📖 [**Read Documentation**](https://http.nuxtjs.org) ## Development diff --git a/docs/README.md b/docs/README.md index 9f1db1d..e006e76 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,12 +1,10 @@ -# 📦 Axios Module - -> Secure and Easy [Axios](https://github.com/mzabriskie/axios) integration with Nuxt.js. +# HTTP Module ## Features ✓ Automatically set base URL for client & server side -✓ Exposes `setToken` function to `$axios` so we can easily and globally set authentication tokens +✓ Exposes `setToken` function to `$http` so we can easily and globally set authentication tokens ✓ Automatically enables `withCredentials` when requesting to base URL @@ -18,13 +16,13 @@ ✓ Integrated with [Proxy Module](https://github.com/nuxt-community/proxy-module) -✓ Auto retry requests with [axios-retry](https://github.com/softonic/axios-retry) +✓ Auto retry requests with [http-retry](https://github.com/softonic/http-retry) ## Links * [GitHub](https://github.com/nuxt/http-module) * [Release Notes](./CHANGELOG.md) * [Migration Guide](migration.md) -* [Examples](https://axios.nuxtjs.org/usage.html) +* [Examples](https://http.nuxtjs.org/usage.html) > 👉 To get started head to [Setup](setup.md) section. diff --git a/docs/SUMMARY.md b/docs/SUMMARY.md index f943e75..da4ce39 100644 --- a/docs/SUMMARY.md +++ b/docs/SUMMARY.md @@ -2,7 +2,7 @@ * [Setup](setup.md) * [Usage](usage.md) -* [Extending axios](extend.md) +* [Extending http](extend.md) * [Helpers](helpers.md) * [Options](options.md) * [Migration Guide](migration.md) diff --git a/docs/extend.md b/docs/extend.md index a3e77aa..8fdc683 100644 --- a/docs/extend.md +++ b/docs/extend.md @@ -1,6 +1,6 @@ -## Extending Axios +## Extending HTTP -If you need to customize axios by registering interceptors and changing global config, you have to create a nuxt plugin. +If you need to customize http by registering interceptors and changing global config, you have to create a nuxt plugin. **nuxt.config.js** @@ -11,20 +11,20 @@ If you need to customize axios by registering interceptors and changing global c ], plugins: [ - '~/plugins/axios' + '~/plugins/http' ] } ``` -**plugins/axios.js** +**plugins/http.js** ```js -export default function ({ $axios, redirect }) { - $axios.onRequest(config => { +export default function ({ $http, redirect }) { + $http.onRequest(config => { console.log('Making request to ' + config.url) }) - $axios.onError(error => { + $http.onError(error => { const code = parseInt(error.response && error.response.status) if (code === 400) { redirect('/400') diff --git a/docs/helpers.md b/docs/helpers.md index 9094546..0d55c02 100644 --- a/docs/helpers.md +++ b/docs/helpers.md @@ -2,7 +2,7 @@ ### Interceptors -Axios plugin provides helpers to register axios interceptors easier and faster. +HTTP plugin provides helpers to register http interceptors easier and faster. - `onRequest(config)` - `onResponse(response)` @@ -12,11 +12,11 @@ Axios plugin provides helpers to register axios interceptors easier and faster. These functions don't have to return anything by default. -Example: (`plugins/axios.js`) +Example: (`plugins/http.js`) ```js -export default function ({ $axios, redirect }) { - $axios.onError(error => { +export default function ({ $http, redirect }) { + $http.onError(error => { if(error.response.status === 500) { redirect('/sorry') } @@ -26,19 +26,19 @@ export default function ({ $axios, redirect }) { ### Fetch Style requests -Axios plugin also supports fetch style requests with `$` prefixed methods: +HTTP plugin also supports fetch style requests with `$` prefixed methods: ```js -// Normal usage with axios -let data = (await $axios.get('...')).data +// Normal usage with http +let data = (await $http.get('...')).data // Fetch Style -let data = await $axios.$get('...') +let data = await $http.$get('...') ``` ### `setHeader(name, value, scopes='common')` -Axios instance has a helper to easily set any header. +HTTP instance has a helper to easily set any header. Parameters: @@ -51,23 +51,23 @@ Parameters: ```js // Adds header: `Authorization: 123` to all requests -this.$axios.setHeader('Authorization', '123') +this.$http.setHeader('Authorization', '123') // Overrides `Authorization` header with new value -this.$axios.setHeader('Authorization', '456') +this.$http.setHeader('Authorization', '456') // Adds header: `Content-Type: application/x-www-form-urlencoded` to only post requests -this.$axios.setHeader('Content-Type', 'application/x-www-form-urlencoded', [ +this.$http.setHeader('Content-Type', 'application/x-www-form-urlencoded', [ 'post' ]) // Removes default Content-Type header from `post` scope -this.$axios.setHeader('Content-Type', false, ['post']) +this.$http.setHeader('Content-Type', false, ['post']) ``` ### `setToken(token, type, scopes='common')` -Axios instance has an additional helper to easily set global authentication header. +HTTP instance has an additional helper to easily set global authentication header. Parameters: @@ -80,17 +80,17 @@ Parameters: ```js // Adds header: `Authorization: 123` to all requests -this.$axios.setToken('123') +this.$http.setToken('123') // Overrides `Authorization` header with new value -this.$axios.setToken('456') +this.$http.setToken('456') // Adds header: `Authorization: Bearer 123` to all requests -this.$axios.setToken('123', 'Bearer') +this.$http.setToken('123', 'Bearer') // Adds header: `Authorization: Bearer 123` to only post and delete requests -this.$axios.setToken('123', 'Bearer', ['post', 'delete']) +this.$http.setToken('123', 'Bearer', ['post', 'delete']) // Removes default Authorization header from `common` scope (all requests) -this.$axios.setToken(false) +this.$http.setToken(false) ``` diff --git a/docs/options.md b/docs/options.md index acf1629..b31e401 100644 --- a/docs/options.md +++ b/docs/options.md @@ -1,6 +1,6 @@ ## Options -You can pass options using module options or `axios` section in `nuxt.config.js` +You can pass options using module options or `http` section in `nuxt.config.js` ### `prefix`, `host` and `port` @@ -43,14 +43,14 @@ Integrate with Nuxt.js progress bar to show a loading bar while making requests. You can also disable progress bar per request using `progress` config. ```js -this.$axios.$get('URL', { progress: false }) +this.$http.$get('URL', { progress: false }) ``` ### `proxy` * Default: `false` -You can easily integrate Axios with [Proxy Module](https://github.com/nuxt-community/proxy-module) and is much recommended to prevent CORS and deployment problems. +You can easily integrate HTTP with [Proxy Module](https://github.com/nuxt-community/proxy-module) and is much recommended to prevent CORS and deployment problems. **nuxt.config.js** @@ -60,7 +60,7 @@ You can easily integrate Axios with [Proxy Module](https://github.com/nuxt-commu '@nuxt/http' ], - axios: { + http: { proxy: true // Can be also an object with default options }, @@ -85,12 +85,12 @@ proxy: { * Default: `false` - Automatically intercept failed requests and retries them whenever posible using [axios-retry](https://github.com/softonic/axios-retry). + Automatically intercept failed requests and retries them whenever posible using [http-retry](https://github.com/softonic/http-retry). By default, number of retries will be **3 times**, if `retry` value is set to `true`. You can change it by passing an object like this: ```js -axios: { +http: { retry: { retries: 3 } } ``` @@ -99,7 +99,7 @@ axios: { * Default: `false` -Adds an interceptor to automatically set `withCredentials` config of axios when requesting to `baseURL` +Adds an interceptor to automatically set `withCredentials` config of http when requesting to `baseURL` which allows passing authentication headers to backend. ### `debug` @@ -112,7 +112,7 @@ Adds interceptors to log request and responses. * Default: `true` -In SSR context, sets client request header as axios default request headers. +In SSR context, sets client request header as http default request headers. This is useful for making requests which need cookie based auth on server side. Also helps making consistent requests in both SSR and Client Side code. diff --git a/docs/setup.md b/docs/setup.md index 12a9775..7e9c5f1 100644 --- a/docs/setup.md +++ b/docs/setup.md @@ -21,7 +21,7 @@ module.exports = { '@nuxt/http', ], - axios: { + http: { // proxyHeaders: false } } diff --git a/docs/usage.md b/docs/usage.md index dbd4bb4..eeb9e3d 100644 --- a/docs/usage.md +++ b/docs/usage.md @@ -5,8 +5,8 @@ **`asyncData`** ```js -async asyncData({ $axios }) { - const ip = await $axios.$get('http://icanhazip.com') +async asyncData({ $http }) { + const ip = await $http.$get('http://icanhazip.com') return { ip } } ``` @@ -16,7 +16,7 @@ async asyncData({ $axios }) { ```js methods: { async fetchSomething() { - const ip = await this.$axios.$get('http://icanhazip.com') + const ip = await this.$http.$get('http://icanhazip.com') this.ip = ip } } @@ -29,7 +29,7 @@ methods: { { actions: { async getIP ({ commit }) { - const ip = await this.$axios.$get('http://icanhazip.com') + const ip = await this.$http.$get('http://icanhazip.com') commit('SET_IP', ip) } } diff --git a/test/fixture/pages/ssr.vue b/test/fixture/pages/ssr.vue index 5332c88..df1f6ef 100644 --- a/test/fixture/pages/ssr.vue +++ b/test/fixture/pages/ssr.vue @@ -1,7 +1,7 @@ @@ -11,11 +11,11 @@ let reqCtr = 1 export default { computed: { - axiosSessionId() { + httpSessionId() { return this.$http._defaults.headers.sessionId }, - axiosEncoding() { + httpEncoding() { return this.$http._defaults.headers['Accept-Encoding'] } }, diff --git a/types/index.d.ts b/types/index.d.ts index 359b65a..0190b08 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -1,35 +1,34 @@ -import { AxiosError, AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios' import Vue from 'vue' import './vuex' -interface NuxtAxiosInstance extends AxiosInstance { - $request(config: AxiosRequestConfig): Promise - $get(url: string, config?: AxiosRequestConfig): Promise - $delete(url: string, config?: AxiosRequestConfig): Promise - $head(url: string, config?: AxiosRequestConfig): Promise - $options(url: string, config?: AxiosRequestConfig): Promise - $post(url: string, data?: any, config?: AxiosRequestConfig): Promise - $put(url: string, data?: any, config?: AxiosRequestConfig): Promise - $patch(url: string, data?: any, config?: AxiosRequestConfig): Promise +interface NuxtHTTPInstance { + $request(config: any): Promise + $get(url: string, config?: any): Promise + $delete(url: string, config?: any): Promise + $head(url: string, config?: any): Promise + $options(url: string, config?: any): Promise + $post(url: string, data?: any, config?: any): Promise + $put(url: string, data?: any, config?: any): Promise + $patch(url: string, data?: any, config?: any): Promise setHeader(name: string, value?: string | false, scopes?: string | string[]): void setToken(token: string | false, type?: string, scopes?: string | string[]): void - onRequest(callback: (config: AxiosRequestConfig) => void): void - onResponse(callback: (response: AxiosResponse) => void): void - onError(callback: (error: AxiosError) => void): void - onRequestError(callback: (error: AxiosError) => void): void - onResponseError(callback: (error: AxiosError) => void): void + onRequest(callback: (config: any) => void): void + onResponse(callback: (response: any) => void): void + onError(callback: (error: any) => void): void + onRequestError(callback: (error: any) => void): void + onResponseError(callback: (error: any) => void): void } declare module '@nuxt/vue-app' { interface Context { - $axios: NuxtAxiosInstance + $http: NuxtHTTPInstance } } declare module 'vue/types/vue' { interface Vue { - $axios: NuxtAxiosInstance + $http: NuxtHTTPInstance } } diff --git a/types/vuex.d.ts b/types/vuex.d.ts index 9fb08f4..315dfa6 100644 --- a/types/vuex.d.ts +++ b/types/vuex.d.ts @@ -1,7 +1,7 @@ -import { NuxtAxiosInstance } from '.' +import { NuxtHTTPInstance } from '.' declare module 'vuex' { interface Store { - $axios: NuxtAxiosInstance, + $http: NuxtHTTPInstance, } }