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 播放系统提示音使用总结(AudioToolbox) 2023-03-01
- Android多返回栈技术 2023-04-15
- Android中的webview监听每次URL变化实例 2023-01-23
- Flutter手势密码的实现示例(附demo) 2023-04-11
- 解决Android Studio突然不显示logcat日志的问题 2023-02-04
- android studio按钮监听的5种方法实例详解 2023-01-12
- iOS开发教程之XLForm的基本使用方法 2023-05-01
- Android开发使用RecyclerView添加点击事件实例详解 2023-06-15
- Flutter绘图组件之CustomPaint使用详解 2023-05-12
- IOS应用内跳转系统设置相关界面的方法 2022-11-20