vue 之 axios的封装

axios的封装

在vue项目开发中，和后台交互获取数据中，我们通常使用的是axios库。但是原生的axios可能对项目的适配不友好，所以在项目开始的时候封装一下axios，保持全项目数据处理的统一性。

1、下载axios

npm i axios -S

// 或者淘宝镜像

cnpm install axios -S

下载过后在min.js文件配置

//main.js
import axios from "axios";

2.配置config文件中的代理地址

在项目目录下的修改 config.js文件，这里是主要书写配置多个后台接口 or 跨域。

module.exports = {
  publicPath: publicPath,
  lintOnSave: false,
  configureWebpack: configureSetWebpack,
  devServer: {
    publicPath,
    proxy: {
      '/api': {
        target: DOMAIN, // 后端接口地址
        changeOrigin: true, // 是否允许跨越,
        ws: false,
        pathRewrite: {
          '^/api': '/api', // 重写,
        },
      },
    },
  },
....
}

3.封装axios实例 : index.js

在项目src目录下新建api文件夹，然后在其中新建 index.js文件，这个文件是主要书写axios的封装过程。

import axios from 'axios'  // 引入axios
import Vue from 'vue'
import router from '../router'
import configUrl from './configUrl'
import {
  cookieGet
} from '@/common/cookie'
import {
  SSL_OP_NO_TLSv1_1
} from 'constants'
// 创建一个 axios 实例(接口)
const ajx = axios.create({
  baseURL: process.env.NODE_ENV == 'scrm' ? configUrl.ajax_url : window.location.origin + '/api/',
  timeout: 1000 * 300,
  withCredentials: true,
  headers: {
    Accept: 'application/json',
    'X-Channel': configUrl.channelId,
    'X-Channel-Type': SSL_OP_NO_TLSv1_1,
    'Content-Security-Policy': 'upgrade-insecure-requests',
  },
})

 // 请求封装

let loading = null;

ajx.interceptors.request.use(
  (config) => {
    // console.log('ajx.interceptors.request-config', config)
    let data = {}
    console.log(config.hasOwnProperty('data'), 'config.hasOwnProperty', config)
    if (config.hasOwnProperty('data')) {
      if (typeof config.data == String) {
        data = JSON.parse(config.data)
      } else {
        data = config.data
      }
      if (data.loadingClose == true) {
        loading = null
      } else {
        loading = Vue.prototype.$loading({
          lock: true,
          text: '加载中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.6)',
        })
      }
      if (config.data.ISUPLOAD) { 
      // 如果请求中带有ISUPLOAD参数则罢Content-Type值换成form-data
        let data = {
          ...config
        }
        config.data = data.data.data
        config.headers['Content-Type'] = "multipart/form-data"
        return config
      }
    } else {
      loading = Vue.prototype.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.6)',
      })
    }

    // 全局加loading,提交时加loading
    const token = cookieGet('token')
    if (token != null || token != undefined) {
      if (cookieGet('Httpheader')) {
        config.headers = JSON.parse(cookieGet('Httpheader'))
      } else {
        config.headers = {
          'Content-Type': 'application/json;charset=UTF-8',
          'X-Channel-Type': SSL_OP_NO_TLSv1_1,
          'X-Channel': configUrl.channelId,
          'X-Security-Token': token,
        }
      }
    }
    return config
  },
  (error) => Promise.error(error)
)

ajx.interceptors.response.use(
  (res) => {
    if (res) {
      // 清除loading
      if (loading) {
        loading.close()
        loading = null
      }

      return res
    }
    return Promise.reject('接口报错')
  },
  (error) => {
    if (error) {
      // 清除loading
      if (loading) {
        loading.close()
        loading = null
      }
      if (error.response.data.code == 50101) {
        // 登录超时，跳回登录页
        localStorage.setItem('clearlogin', true)
        router.replace('/login')
      }

      let msg = '接口请求错误'
      if (error.response) {
        msg = error.response.data.message
      }
      Vue.prototype.$notify.error({
        title: '错误',
        message: msg,
      })
      return Promise.reject(msg)
    }
    return null
  }
)




export function HttpGet(url, params = {}) {
  return new Promise((resolve, reject) => {
    ajx
      .get(url, {
        params,
      })
      .then((response) => {
        resolve(response.data)
      })
      .catch((err) => {
        reject(err)
      })
  })
}

export function HttpPost(url, data = {}) {
  return new Promise((resolve, reject) => {
    ajx.post(url, data).then(
      (response) => {
        if (url == 'user/signin') { // 登录接口返回的请求头数据进行处理
          // /登录,把请求头返回
          resolve(response)
        } else {
          resolve(response.data)
        }
      },
      (err) => {
        reject(err)
      }
    )
  })
}

export function HttpPatch(url, data = {}) {
  return new Promise((resolve, reject) => {
    ajx.patch(url, data).then(
      (response) => {
        resolve(response.data)
      },
      (err) => {
        reject(err)
      }
    )
  })
}

export function HttpPut(url, data = {}) {
  return new Promise((resolve, reject) => {
    ajx.put(url, data).then(
      (response) => {
        resolve(response.data)
      },
      (err) => {
        reject(err)
      }
    )
  })
}
export function HttpDelete(url, data = {}) {
  return new Promise((resolve, reject) => {
    ajx.delete(url, data).then(
      (response) => {
        resolve(response.data)
      },
      (err) => {
        reject(err)
      }
    )
  })
}

4.调用封装

在项目src目录下api文件夹，然后在其中新建 调用模块文件，这个文件是主要书写调用那些接口。

如上图为列；在automation.js文件中先引入你在index.js里封装的axios

import {
  HttpGet,
  HttpPost,
  HttpPut,
  HttpDelete
} from '../index'

const apis = {
  listone: 'user/index/list/one' // 自定义事件
}
// 自定义事件列表
export const listone= (params) => HttpGet(apis.listone + params)

如上述代码看出 先import 导入封装的axios的方法；其次再apis对象里定义具体接口；最后再 export 出 此接口用什么方法调取。

5.如何在vue文件中调用

import { intelligentlist } from '@/api/automation/automation'

 methods: {
    getautomlist() {
      intelligentlist({
       page:1,
       size:10
       }).then(res => {
        if (res.code == 0) {
         .....
        }
      })
    },
}

这样就完成了一次axios封装与使用；适合大中型项目，如果是自己小项目，就直接用axios就ok了。。。