vue3中封装axios
vue3中封装axios安装axiosnpm install axios --save在src文件下创建api文件夹在api文件中建立模板ceshi.js在模板文件中输入内容import axios from 'axios'//创建axios的一个实例var instance = axios.create({baseURL:'http://localhost:8080/',//接口统一域名time
·
vue3中封装axios
- 安装axios
npm install axios --save
- 在src文件下创建api文件夹
- 在api文件中建立模板 ceshi.js
- 在模板文件中输入内容
import axios from 'axios'
//创建axios的一个实例
var instance = axios.create({
baseURL:'http://localhost:8080/',//接口统一域名
timeout: 6000 //设置超时
})
//------------------- 一、请求拦截器 忽略
instance.interceptors.request.use(function (config) {
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
//----------------- 二、响应拦截器 忽略
instance.interceptors.response.use(function (response) {
return response.data;
}, function (error) {
// 对响应错误做点什么
console.log('拦截器报错');
return Promise.reject(error);
});
export default instance
- 在api文件下创建接口文件 nav.js
- 在接口文件中输入内容
import req from './ceshi.js'; //连接接口文件
export function list({ pageNo, pageSize }) {
return req({
url: '/user/organizations',
method: 'get',
params:{
pageNo,
pageSize
},
headers: {
authorization: sessionStorage.getItem("token"),
//设置请求报文头,没有可以不写
},
})
}
- 在vue文件中调用已经写好的函数
import {list} from '../api/nav' //引入进来
- 在事件或生命周期中调用
list({pageNo:1,pageSize:20}) //函数名以及传参
.then(res=>{
console.log(res) //成功后返回的数据
})
以上就是封装axios接口的步骤,希望对你有所帮助
更多推荐
已为社区贡献4条内容
所有评论(0)