Vue封装axios 并注册为全局函数

「爱情、让人受尽委屈。」 2022-05-14 00:48 332阅读 0赞

npm install axios(或在index.html引入axios文件)

在src目录下新建api文件夹，将http请求相关文件统一管理

![20190901192851710.png][]

1.axios.js

import axios from 'axios'
    
    class httpRequest {
      constructor (baseUrl) {
        this.baseUrl = baseUrl
      }
      getInsideConfig () {
        const config = {
          baseURL: this.baseUrl,
          timeout: 20000, // 超时时间 可自定义其他配置
          headers: {
            // 'token': token
          }
        }
        return config
      }
      interceptors (instance) {
        // 请求拦截
        instance.interceptors.request.use(config => {
          // 这里可以自定义一些config 配置
          let { data } = config
          return data
        }, error => {
          // 请求错误处理
          return Promise.reject(error)
        })
        // 响应拦截
        instance.interceptors.response.use(res => {
          const { data, status } = res
          return { data, status }
        }, error => {
          let info = {}
          let { status, statusText, data } = error.response
          if (!error.response) {
            info = {
              code: 5000,
              msg: 'Network Error'
            }
          } else {
            // 此处整理错误信息格式
            info = {
              code: status,
              data: data,
              msg: statusText
            }
          }
          return Promise.reject(info)
        })
      }
      request () {
        let instance = axios.create()
        let options = Object.assign(this.getInsideConfig())
        this.interceptors(instance)
        return instance(options)
      }
    }
    export default httpRequest

2.api.request.js

import HttpRequest from './axios'
    
    const baseUrl = process.env.NODE_ENV === 'development' ? 'http://localhost:8088' : 'http://api.com'
    const axios = new HttpRequest(baseUrl)
    export default axios

3.api.js

import httpserver from './api.request'
    
    let httpConfig = {
      getLogin: (params) => {
        return httpserver.request({
          url: '',
          method: 'get',
          params: params
        })
      },
      getUser: (params) => {
        return httpserver.request({
          url: '',
          method: 'post',
          data: params
        })
      }
    }
    
    export default httpConfig

4.为了避免繁琐的import相关的api，最后在mian.js注册一个http全局函数

import httpConfig from './api/api' // 全局http请求
    
    Vue.prototype.$http = httpConfig // 注册全局http请求

[20190901192851710.png]: /images/20220514/ee93b94837594f558d877e4e16d435fa.png