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开发,这道面试题你能答出来,说明你基础很OK! 2023-09-14
- 最好用的ios数据恢复软件:PhoneRescue for Mac 2023-09-14
- iOS 对当前webView进行截屏的方法 2023-03-01
- 详解flutter engine 那些没被释放的东西 2022-12-04
- Android studio实现动态背景页面 2023-05-23
- Flutter实现底部和顶部导航栏 2022-08-31
- Android MaterialButton使用实例详解(告别shape、selector) 2023-06-16
- Android实现轮询的三种方式 2023-02-17
- SurfaceView播放视频发送弹幕并实现滚动歌词 2023-01-02
- Android实现监听音量的变化 2023-03-30