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 {
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) => {

let data = {}

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了。。。