vue3|vue3 axios封装接口请求
1、在项目中安装axios
vue add axios2、main.js
import './plugins/axios' // 安装axios完毕自动新增此行3、./plugins/axios.js
import axios from 'axios'
import qs from 'qs'
import {
ElMessage
} from 'element-plus';
const http = {}const Axios = axios.create({
timeout: 200000,
withCredentials: true, // 自动携带cookie
baseURL: '', // 接口地址
headers: {
'Content-Type': 'application/x-www-form-urlencoded;
charset=UTF-8'
},
validateStatus(status) {
return status >= 200 && status < 300
}
});
// 请求拦截
Axios.interceptors.request.use(config => {
// 头部如需带上token,在此处配置
return config
}, err => {
return Promise.reject(err)
})// 响应拦截
Axios.interceptors.response.use(res => {
return res;
}, err => {
switch (err.response.status) {
case 400:
ElMessage({
showClose: true,
message: '请求出错', // 此处可以换成接口返回的报错信息
type: 'error'
});
break;
case 401:
ElMessage({
showClose: true,
message: '授权失败，请重新登录', // 此处可以换成接口返回的报错信息
type: 'error'
});
return;
case 422:
ElMessage({
showClose: true,
message: '参数错误，请检查填写的参数', // 此处可以换成接口返回的报错信息
type: 'error'
});
return;
case 403:
ElMessage({
showClose: true,
message: '拒绝访问', // 此处可以换成接口返回的报错信息
type: 'error'
});
break;
case 404:
ElMessage({
showClose: true,
message: '请求错误,未找到该资源', // 此处可以换成接口返回的报错信息
type: 'error'
});
break;
case 500:
ElMessage({
showClose: true,
message: '请重新登录', // 此处可以换成接口返回的报错信息
type: 'error'
});
break;
}
return Promise.reject(err);
})http.get = function(url, data = https://www.it610.com/article/{}) {
return new Promise((resolve, reject) => {
Axios.get(url, {
params: data
}).then(res => {
resolve(res);
}).catch(err => {
reject(err);
})
})
}http.del = function(url, data = https://www.it610.com/article/{}) {
return new Promise((resolve, reject) => {
Axios.delete(url, {
params: data
}).then(res => {
resolve(res);
}).catch(err => {
reject(err);
})
})
}http.post = function(url, data) {
return new Promise((resolve, reject) => {
Axios.post(url, qs.stringify(data)).then(res => {
resolve(res);
}).catch(err => {
reject(err);
})
})
}export default http4、封装请求接口 url.js：请求的路径
index.js: 封装的接口方法
文章图片
url.js
const url = {
'Login': '/login',
'Test': '/test',
}module.exports = url;
【vue3|vue3 axios封装接口请求】index.js
import axios from '@/plugins/axios'
import url from './url.js'let API = {};
// 登录
API.login = function(data) {
return axios.post(url.Login, data);
}// 获取测试内容
API.getTest= function() {
return axios.get(url.Test);
}export default API
5、调用接口
import API from '@/api/index.js'export default {
name: 'login',
data() {
return {
adminForm: {
username: '',
password: ''
},
}
},
methods: {
submitForm() {
let self = this;
API.login(self.adminForm).then(res => {
console.log(res)
})
}
}}推荐阅读
- 2020-04-07vue中Axios的封装和API接口的管理
- 基于|基于 antd 风格的 element-table + pagination 的二次封装
- python自定义封装带颜色的logging模块
- jQuery插件
- 接口|axios接口报错-参数类型错误解决
- 使用Promise对微信小程序wx.request请求方法进行封装
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- vue.js|vue中使用axios封装成request使用
- Objective-c
- Swift学习笔记（三）Alamofire二次封装