【axios】对axios二次封装（简单向）

axios文档地址

www.npmjs.com/package/axi…

本文只是对axios进行简单的一些封装和配置，具体的一些细节请移步axios的文档查询！

下面我们就开始进行我们的封装！

最终实现效果

1.在app.js中配置接口（或者可将api.js根据业务进行更细致的划分，后用esm引入拼装）

//api.js
import qs from 'qs'
import base from './base.js'
import serve from './serve.js'
export default {// post表单请求getData1(params) {return server.post(`${base.serve1}/xxxx`, qs.stringify(params))},// post json请求getData2(params) {return server.post(`${base.serve2}/xxxx`, params)},// get 请求getData2(params) {return server.get(`${base.serve3}/xxxx`, { params })},
} 

2.在页面中使用

//index.vue
// vue2
methods:{async getData(){this.loading = trueconst res = await this.$api.getData1(this.data)this.loading = falseif(res){// todo}}
}

// index.vue
// vue3
import { getData1 } from './api.js'
async setup(){const { proxy } = getCurrentInstance()const res = await getData1()if(res){// todo}
} 

axios对象的创建

创建 axios 对象，添加基本配置

// serve.js
import axios from 'axios'

const config = {timeout: 150000
}

const serve = axios.create(config) 

这里不对 config.baseUrl 做配置，是因为有些具体的业务可能会调用不同的服务接口，为了更好的维护不同的服务接口，我们在 base.js 文件中做更细致的配置。

创建 base.js 地址文件

// base.js
const base = {}
// 这里可用在配置文件中修改环境