使用axios优雅的发起网络请求
公司项目使用了vue作为技术栈，便理所应当地使用了官方推荐的axios进行网络请求，这里记录下axios的封装方法，以备以后也能优雅的使用。
ajax.js：
/*引入axios*/
import axios from 'axios'/*创建axios实例对象*/
const ajax = axios.create({
baseURL: ajaxUrl,
timeout: 30000
})/*请求拦截器（请求之前的操作）*/
ajax.interceptors.request.use(
config => {
return config
},
/*错误操作*/
err => {
return Promise.reject(err)
}
)/*请求之后的操作*/
ajax.interceptors.response.use(
config => {
return config
},
err => {
return Promise.reject(err)
})/*导出模块*/
export default ajax【使用axios优雅的发起网络请求】api.js：
import ajax from '../libs/ajax'const captcha = () => {
return ajax.get(`app/captcha`)
}
const login = (params) => {
return ajax.post(`auth/login`, params)
}const apiList = {
captcha,
login
}export default apiList
index.js：
将导出的api请求挂在到vue原型上
import apiList from './api'const install = function (Vue) {
if (install.installed) return
install.installed = true/*定义属性到Vue原型中*/
Object.defineProperties(Vue.prototype, {
$api: {
get () {
return apiList
}
}
})
}export default {
install
}main.js：
/*引入index.js*/
import api from '.xxx' Vue.use(api)
按以上模板进行封装之后，就可以在需要的地方直接发起api请求了，如下：
this.$api.login(params).then(res => {
/*请求成功后的操作*/
}).catch(err => {
/*请求失败后的操作*/
})
推荐阅读
- 由浅入深理解AOP
- 【译】20个更有效地使用谷歌搜索的技巧
- 2020-04-07vue中Axios的封装和API接口的管理
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决
- MybatisPlus使用queryWrapper如何实现复杂查询
- iOS中的Block
- Linux下面如何查看tomcat已经使用多少线程
- 使用composer自动加载类文件
- android|android studio中ndk的使用