Axios Part 2



1.       Create a new axios-main.js:

 

import axios from 'axios';

 

const intance = axios.create({

                baseURL: 'https://react-my-burger-8eda4.firebaseio.com/'

});

 

export default instance

 

2.       In another file you can import the axios instance:

 

import axios from '../../axios-main';

 

axios.get('/orders.json')

                                                                .then(res => {

                                                                                …

                                                                                …

                                                                })

                                                                .catch(err => {

                                                                                …

                                                                });

1.            Create a new axios-main.js:

 

import axios from 'axios';

 

const intance = axios.create({

                baseURL: 'https://react-my-burger-8eda4.firebaseio.com/'

});

 

intance.defaults.baseURL = 'https://jsonplaceholder.typicode.com';

intance.defaults.headers.common['Authorization'] = 'AUTH TOKEN';

intance.defaults.headers.post['Content-Type'] = 'application/json';

 

intance.interceptors.request.use(request => {

    console.log(request);

    // Edit request config

    return request;

}, error => {

    console.log(error);

    return Promise.reject(error);

});

 

intance.interceptors.response.use(response => {

    console.log(response);

    // Edit request config

    return response;

}, error => {

    console.log(error);

    return Promise.reject(error);

});

 

export default instance

 

2.            In another file you can import the axios instance:

 

import axiosInstance from '../../axios-main';

 

axiosInstance.get('/orders.json')

                                                                .then(res => {

                                                                                …

                                                                                …

                                                                })

                                                                .catch(err => {

                                                                                …

                                                                });

 

If you may need to remove an interceptor later you can.

const myInterceptor =axios.interceptors.request.use(function () {/*...*/});

axios.interceptors.request.eject(myInterceptor);

 

You can add interceptors to a custom instance of axios.

const instance = axios.create();

instance.interceptors.request.use(function () {/*...*/});

Comments

Post a Comment

Popular posts from this blog

Set Up Babel and Webpack

1. Create a project directory and cd in to that directory from the terminal 2. Initiate npm: npm init -y 3. Install webpack and webpack-cli npm i webpack --save-dev npm i webpack-cli --save-dev 4. Add webpack command under scripts in package.json "build": "webpack --mode production" 5. Install babel and babel loader npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev 6. Create .babelrc file and configure it { "presets": ["@babel/preset-env", "@babel/preset-react"] } To run / test async code .baelrc file should be: { "presets": [ [   "@babel/preset-env", { "targets": {   "node": "current" }   } ] ] } 7. Create webpack.config.js file and configure it const path = require('path'); module.exports = {   entry: path.resolve(__dirname, 'src'),   output: {         path: path.resolve(__dirnam...
Read more

Typescript Setup

Typescript: 1. Install typescript: npm install typescript 2. Command to convert a typescript file(*.ts) to a javascript file (*.js) tsc file_name.ts 3. Initialize npm npm init 4. Install lite-server npm install lite-server --save-dev 5. Add a script command to package.json to start the lite-server "start": "lite-server" 5. Initialize tsc tsc --init Add the following to the tsconfig.json if it doesn't exist already: "sourceMap": true, "exclude": [ "node_modules" ] 6. To compile all typescript files to javascript simply run: tsc 7. For Modules npm install --save-dev ts-loader webpack webpackconfig.js: const path = require('path'); module.exports = {   entry: './index.ts',   devtool: 'inline-source-map',   module: { rules: [   { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/   } ]   }, ...
Read more

Typescript + React Setup

Typescript and React setup steps: 1. npm init 2. npm install typescript -g (if it was not already installed globally) 3. npm install typescript (ts-loader needs a local version of typescript installed in the project) 4. tsc --init 5. Example tsconfig.json {   "compilerOptions": { "target": "es5",                        "jsx": "react", // Important                          } } 6. npm install --save react react-dom @types/react @types/react-dom 7. npm install --save-dev ts-loader webpack webpack-cli 8. Sample webpack.config.js const path = require('path'); module.exports = {   entry: './src/index.tsx',   devtool: 'inline-source-map',   module: { rules: [   { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/   } ]   },   resolve: { extensions: [ ".ts...
Read more