axios基础封装
request.js
新建文件夹 network 在文件新建 request.js
import axios from 'axios'
export function request (config) {
// 1创建axios实例
const intstance = axios.create({
baseURL: 'https://localhost:44314',
timeout: 5000
// contentType: 'application/json;
charset=UTF-8',
// dataType: 'json'
})
// 1.axios拦截器
intstance.interceptors.request.use(config => {
return config
}, er => {})
// 1.axios响应拦截拦截
intstance.interceptors.response.use(res => {
return res
}, er => {
})
return intstance(config)
}
export default request //导出main.挂载配置
import request from '@/network/request'new Vue({
el: '#app',
router,
store,
request, // 封装的axios
components: { App },
template: ''})vue组件调用
【axios基础封装】在需要使用axios的vue组件调用
import request from '@/network/request'request({ // 查询所有
url: '/api/Gj'
}).then(res => {
this.tableData = https://www.it610.com/article/res.data
}) request({ // 条件查询
url:'/api/Gjtype/' + gjtype
}).then(res => {
this.tableData = https://www.it610.com/article/res.data
}) request({ // 添加
url:'/api/Gj',
method: 'POST',
data: {
'id': 0,
'method': this.method,
'text': this.content,
'type': this.value
}
}).then(res => {
console.log(res)
if (res.status === 201) {
this.open1()
console.log('成功')
} else {
this.open4()
console.log('失败')
}
}).catch(console.error.bind(console)) // 异常request({// 更新
url: '/api/Gj/' + this.id,
method: 'put',
data: {
'id': this.newinfo.id,
'method': this.newinfo.method,
'text': this.newinfo.text,
'type': this.newinfo.type
}
}).then(res => {
if (res.status === 204) {
this.open1()
console.log('成功')
} else {
this.open4()
console.log('失败')
}
}).catch(console.error.bind(console)) // 异常推荐阅读
- 2020-04-07vue中Axios的封装和API接口的管理
- 基于|基于 antd 风格的 element-table + pagination 的二次封装
- python自定义封装带颜色的logging模块
- Python基础|Python基础 - 练习1
- Java|Java基础——数组
- jQuery插件
- Java基础-高级特性-枚举实现状态机
- 营养基础学20180331(课间随笔）??
- iOS面试题--基础
- HTML基础--基本概念--跟着李南江学编程