1.引入axiosnpm install axios2.src下面创建http文件夹(下图) api.jsimport axios from axiosvar $http = axios.create({baseURL: https://wwww.baidu.com//服务器地址});// 添加请求拦截器$http.interce...
1.引入axios
npm install axios
2.src下面创建http文件夹(下图)
api.js
import axios from 'axios'
var $http = axios.create({
baseURL: 'https://wwww.baidu.com'//服务器地址
});
// 添加请求拦截器
$http.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
config.headers['Authorization'] = 'Bear ' + '123456'//按需求写入token
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
$http.interceptors.response.use(function (response) {
// 对响应数据做点什么
let data = response.data
return data;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
export default $http
index.js
import axios from './api'
let api = {}
// 登陆
api.login = function (data) {
return axios({
url: '/login',
method: 'POST',
data: data
})
}
export default api
页面引用
import api from '@/http/index.js';
setup中调用
let login = () => {
let data = {
username: '小三',
password: '123456789'
};
api.login(data).then((res) => {
if (res.error_code === 'Success') {
console.log(res.data);
}
});
};
return {
login
};
沃梦达教程
本文标题为:vue3.0 axios请求封装(vue2.0也适合)
基础教程推荐
猜你喜欢
- IOS获取系统相册中照片的示例代码 2023-01-03
- Android Compose自定义TextField实现自定义的输入框 2023-05-13
- iOS中如何判断当前网络环境是2G/3G/4G/5G/WiFi 2023-06-18
- iOS Crash常规跟踪方法及Bugly集成运用详细介绍 2023-01-18
- Android实现短信验证码输入框 2023-04-29
- MVVMLight项目Model View结构及全局视图模型注入器 2023-05-07
- Android开发Compose集成高德地图实例 2023-06-15
- iOS开发使用XML解析网络数据 2022-11-12
- iOS开发 全机型适配解决方法 2023-01-14
- Flutter进阶之实现动画效果(三) 2022-10-28