Axios encapsulates and unrequests repeated applications

Encapsulates the code

// axios.js
// Encapsulate the AXIos request to return the reencapsulated data format
import axios from 'axios'
import errHandle from './errHandle'

class HttpRequest {
  constructor(baseUrl) {
    this.baseUrl = baseUrl
  }

  getInsideConfig () {
    const config = {
      baseURL: this.baseUrl,
      headers: {
        'Content-Type': 'application/json; charset=utf-8'
      },
      timeout: 10000
    }
    return config
  }

  // Set interceptor
  interceptors (instance) {
    // Add request interceptor
    instance.interceptors.request.use((config) = > {
        // Add a token to the header if there is one
     if () {
            config.headers.Authorization = JSON.parse(window.localStorage.getItem("Login")).token
     }
        
      return config
    }, (error) = > {
      // Unified handling of errors
      // What to do about the request error
      errHandle(error)
      return Promise.reject(error)
    })

    // Add a response interceptor
    instance.interceptors.response.use((res) = > {
      if (res.status === 200) {
        return Promise.resolve(res.data)
      } else {
        return Promise.reject(res)
      }
      // What to do with the response data
    }, (error) = > {
      // debugger
      errHandle(error)
      // Do something about the response error
      return Promise.reject(error)
    })
  }

  // Create an instance
  request (options) {
    const instance = axios.create()
    const newOptions = Object.assign(this.getInsideConfig(), options)
    this.interceptors(instance)
    return instance(newOptions)
  }

  get (url, config) {
    const options = Object.assign({
      method: 'get',
      url
    }, config)
    return this.request(options)
  }

  post (url, data) {
    return this.request({
      method: 'post',
      url,
      data
    })
  }
}

export default HttpRequest

Copy the code

// request.js
import HttpRequest from './axios'
import config from '. /.. /config'

// Different request URLS for different environments
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev
  : config.baseUrl.prod

const axios = new HttpRequest(baseUrl)

export default axios
Copy the code

Cancel the repeated request application

In the development project, when dealing with the long list, click to load more, we need to consider the user’s slow network speed. Before the request arrives, if we click to load more again, we need to cancel the repeated request.

axios.js

const CancelToken = axios.CancelToken
constructor(baseUrl) {
    this.baseUrl = baseUrl
    this.pending = {} // ++
}
// ------------------------- 
// key determines whether the request is the same
// isRequest determines whether the request has been answered
// this.pending[key] Determines whether the message is sent
removePending(key, isRequest = false) {
    if (this.pending[key] && isRequest) {
        this.pending[key]('Cancel duplicate request! ')}delete this.pending[key]
}
// ------------------------- 
// Determine if the last request had a response request interceptor
instance.interceptors.request.use((config) = > {
    const key = config.url + '&' + config.method
    this.removePending(key, true)
    
    / / core.. The call cancels the request.
    config.cancelToken = new CancelToken(c= > {
        this.pending[key] = c
    })
    return config
},

// -------------------------                
                                  instance.interceptors.response.use((res) = > {
    const key = res.config.url + '&' + res.config.method
    this.removePending(key) // isRequest = false by default
 
    if (res.status === 200) {
        return Promise.resolve(res.data)
    } else {
        return Promise.reject(res)
    }
    ...
})
Copy the code

Send request in component:

getList(options).then(res= > {
    / /... do sth
}).catch(e= > {
    if (e) {
        this.$alert(e.message)
    }
    // e.message(call the argument passed by c above)
})
Copy the code

The whole process is to submit a request. This.pending [key] has a value. If the user has not received a response due to network speed problems (you can debug the network speed in the browser network), then click send request again. This.$alert(e.message) will be executed. If there is a response, delete this.pending[key], which completes the cancellation of repeated requests and prompts the user.