Why encapsulate network requests?

Before haven’t encapsulation, want to use axios framework, need to be in every place to import and use of axios, pour in a small demo is no problem, but in a large project, a lot of places need to request, hundreds of thousands, so if need each use operation, change the frame, You need to modify every single file, which is a huge amount of work.

The basic use

I created the Network folder in the Components folder and created a new request.js file to encapsulate the request.

Encapsulation method

Import axios

import axios from 'axios'
Copy the code

Format 1

export function request(config, success, failure) { const instance = axios.create({ baseURL: 'http://123.207.32.32:8000', the timeout: 5000 }) instance(config) .then(res => { // console.log(res) success(res) }) .catch(err => { // console.log(err) failure(err) }) }Copy the code

Call Format 1

The import request from attach. '/ components/network/request' request ({url: '/ home/multidata,}, res = > {the console. The log (' successful call! ') console.log(res) }, err => { console.log(err) })Copy the code

Format 2

The export function request (config) {const instance = axios. Create ({baseURL: 'http://123.207.32.32:8000', the timeout: 5000 }) instance(config.baseConfig) .then(res => { // console.log(res) config.success(res) }) .catch(err => { // console.log(err) config.failure(err) }) }Copy the code

Call Format 2

request({
  baseConfig: {
    url: '/home/multidata'
  },
  success: function (res) {
    console.log(res)
  },
  failure: function (err) {
    console.log(err)
  }
})
Copy the code

Promise form

export function request(config) { return new Promise((resolve, reject) => { const instance = axios.create({ baseURL: 'http://123.207.32.32:8000', the timeout: 5000 }) instance(config) .then(res => { // console.log(res) resolve(res) }) .catch(err => { // console.log(err) reject(err) }) }) }Copy the code

shorthand

The export function request (config) {const instance = axios. Create ({baseURL: 'http://123.207.32.32:8000', the timeout: 5000 }) return instance(config) }Copy the code

Call form

request({
  url: '/home/multidata'
}).then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})
Copy the code

Axios interceptor

Axios provides an interceptor for each request we send or response we receive.

Usage scenarios

  1. For example, some information in config does not meet the requirements of the server
  2. For example, each time a network request is sent, a loading icon is expected to be displayed on the interface.
  3. Some network requests, such as logins (tokens), must carry special information

Method of use

Request to intercept

instance.interceptors.request.use(config => {
        console.log(config)
        return config
    },err => {
        console.log(err)
        return err
    })
Copy the code

The response to intercept

instance.interceptors.response.use(res => {
        console.log(res)
        return res.data
    },err => {
        console.log(err)
    })
Copy the code