Axios安装封装api接口
时间:2022-07-24
本文章向大家介绍Axios安装封装api接口,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
官方文档地址axios 安装axios
npm install axios
在main.js中添加
import Axios from 'axios'
Vue.prototype.$axios = Axios;
new Vue({
el: '#app',
Axios,
components: { App },
template: '<App/>'
})
在src中新建一个axios文件夹,建一个http.js文件 Dialog为vant组件
import axios from "axios";
import qs from "qs";
import {
Dialog
} from "vant";
// 读取环境配置获取接口地址
axios.defaults.baseURL = process.env.VUE_APP_BASE_URL;
//post请求头
axios.defaults.headers.post["Content-Type"] =
"application/x-www-form-urlencoded;charset=UTF-8";
//设置超时
axios.defaults.timeout = 10000;
axios.interceptors.request.use(
config => {
return config;
},
error => {
return Promise.reject(error);
}
);
axios.interceptors.response.use(
response => {
if (response.status == 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
error => {
Dialog.alert({
title: '提示',
message: '网络请求失败,请刷新重试',
})
}
);
export default {
post(url, data) {
return new Promise((resolve, reject) => {
axios({
method: 'post',
url,
data: qs.stringify(data),
})
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err)
});
})
},
get(url, data) {
return new Promise((resolve, reject) => {
axios({
method: 'get',
url,
params: data,
})
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err)
})
})
}
};
在main.js中引入
import https from './axios/http'
Vue.prototype.https = https
新建个request.js文件用来放全部接口
import http from './http'
//Object.assign拷贝每个接口固定传参
const post = (url, data) => http.post(url, Object.assign({
api_key: "133132",
sign: "133132"
}, data))
/**
* 传一个参数的
* @param {*}
*/
const getClassSchedule = (schedule_id) => post('getClassSchedule', {
schedule_id,
})
/**
* 传多个参数的
* @param {*}
* page:1
* limit:10 最大页数
*/
const getCarouselList = ({
page,
limit
}) => post('getCarouselList', {
page,
limit,
})
/***
* 不传参数的
* @param {*}
*/
const getUserInfo = () => post('getUserInfo', {})
//接口导出
export {
getClassSchedule,
getCarouselList,
getUserInfo
}
在组件中调用
//导入接口
import { getClassSchedule ,getCarouselList,} from "../axios/request";
export default {
methods: {
//传一个值的
async getmore() {
const res = await getClassSchedule(id);
if (res.status == 1) {
} else {
}
},
//传多个值的
async getbanner() {
const res = await getCarouselList({ page: 1, limit: 10 });
if (res.status == 1) {
} else {
}
}
//不传值的
async getinfo() {
const res = await getUserInfo();
if (res.status == 1) {
} else {
}
},
}
}
- IEEE Trans 2009 Stagewise Weak Gradient Pursuits论文学习
- async和enterproxy控制并发数量
- 从零开始写项目终极【维护网站、修复Bug】
- Redis 数据结构与内存管理策略(下)
- Redis 数据结构与内存管理策略(上)
- Servlet第三篇【request和response简介、response的常见应用】
- Java 10的10个新特性,将彻底改变你写代码的方式!
- JDK9新特性实战:简化流关闭新姿势。
- Druid数据库连接池就是这么简单
- 使用 github 做代码管理,知道这些就够了
- 二叉树就这么简单
- Elasticsearch就是这么简单
- 让 MyBatis Generator 变的更简单
- SpringMVC【参数绑定、数据回显、文件上传】
- java教程
- Java快速入门
- Java 开发环境配置
- Java基本语法
- Java 对象和类
- Java 基本数据类型
- Java 变量类型
- Java 修饰符
- Java 运算符
- Java 循环结构
- Java 分支结构
- Java Number类
- Java Character类
- Java String类
- Java StringBuffer和StringBuilder类
- Java 数组
- Java 日期时间
- Java 正则表达式
- Java 方法
- Java 流(Stream)、文件(File)和IO
- Java 异常处理
- Java 继承
- Java 重写(Override)与重载(Overload)
- Java 多态
- Java 抽象类
- Java 封装
- Java 接口
- Java 包(package)
- Java 数据结构
- Java 集合框架
- Java 泛型
- Java 序列化
- Java 网络编程
- Java 发送邮件
- Java 多线程编程
- Java Applet基础
- Java 文档注释
- Ubuntu系统 使用与开发 常见异常与解决办法
- 淘宝首页Bug!嵌套滑动及NestedScroll
- 曝光埋点方案:recyclerView中的item曝光逻辑实现
- Android中的动画全解!
- Python 爬取留言板留言(二):多线程版+selenium模拟
- 嵌套滑动通用解决方案--NestedScrollingParent2
- Python 爬取留言板留言(一):单进程版+selenium模拟
- Glide-图片加载框架全解(一)- 基本用法
- Python全栈(六)项目前导之1.Redis介绍及数据类型介绍
- 网络请求框架OkHttp3全解系列(一):OkHttp的基本使用
- 网络请求框架OkHttp3全解系列 - (二)OkHttp的工作流程分析
- 这次,我把Android事件分发机制翻了个遍
- 网络请求框架OkHttp3全解系列 - (三)拦截器详解1:重试重定向、桥、缓存(重点)
- Python全栈(七)Flask框架之4.Flask模板继承与案例练习
- 你想要的系列:网络请求框架OkHttp3全解系列 - (四)拦截器详解2:连接、请求服务(重点)