axioswal

axioswal

Simply axios and sweetalert2 combined.

Installation

npm install axioswal

Usage

swalaxios = require('swalaxios');

axioswal(axios[, swal[, config]])

axioswal takes 3 arguments:

• The first argument is axios request config: axios
• The second argument is SweetAlert2 config: swal
• The third argument is axioswal config: config

axioswal({
  //  axios config
  url: 'http://example.com/api',
  method: 'post'
}, {
  //  swal config
  position: 'top-end',
  timer: 1500
}, {
  //  swalaxios config
  check: (data) => (data.myApiStatus === 'success') //  considered the request a success if the response data has myApiStatus === 'success' or a failure otherwise.
  text: (data) => data.myApiMessage
});

Aliases

For convenience, if you are not planning to have axios config, you can use the following methods:

axioswal.get(url[, swal[, config]])

axioswal.delete(url[, swal[, config]])

axioswal.head(url[, swal[, config]])

axioswal.options(url[, swal[, config]])

axioswal.post(url[, data[, swal[, config]]])

axioswal.put(url[, data[, swal[, config]]])

axioswal.patch(url[, data[, swal[, config]]])

Configuration

config is the last argument in axioswal(), which accepts the properties in the table below. Please note that data refers to axios's response.data.

options	description	default
check	Custom function that takes one argument: data, to consider the response as a success or failure. This should returns either true or false	defaultCheckFunc
text	Custom function that takes two arguments: data, ok (true or false) and returns the user-readable text (message). This should returns a string.	defaultTextFunc
noSwal	Do not show sweetalert2.	false

default functions

defaultCheckFunc

By default, defaultCheckFunc will returns false (the request is considered a failure) if the response data satisfies any of the conditions below:

• response.error key exists.
• response.status === 'error'
• response.ok === false
• response.success === false

Is there any other common response schema? Make a PR!

Request is always considered a failure if it isAxiosError (such as 4xx and 5xx error)

defaultTextFunc

By default, defaultTextFunc will attempt to read from the following (prioritized from top to bottom):

• response.error.message (in case of failed request)
• response.error.msg (in case of failed request)
• response.error if it is a string (in case of failed request)
• response.message
• response.msg
• response.text
• response if it is not a JSON response.
• 'Success!' or 'An error has occurred.' depends on whether the request is considered successful.

Is there any other common response schema? Make a PR!

axioswal returns promise

axioswal() always returns a promise which resolves to axios's response.data. (even in isAxiosError).

//  Example of a sign in form in `React` (with Hooks)
const handleSubmit = (event) => {
  event.preventDefault();
  axioswal
    .post("/api/authenticate", {
      email,
      password
    })
    .then((data) => {
      if (data.status === false) {
        //  empty password field if incorrect credentials
        setPassword('');
      }
      else {
        //  redirect if log in is a success
        window.location = '/';
      }
    });
};

Contributing

Please see my contributing.md.

License

MIT