Axios封装请求后端接口

Axios封装请求后端接口

官方文档地址​​axios​​安装axios

npm install axios

在main.js中添加

import Axios from 'axios'Vue.prototype.$axios = Axios;new Vue({ el: '#app', Axios, components: { App }, template: ''})

在src中新建一个axios文件夹，建一个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-= 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 from './axios/=

新建个request.js文件用来放全部接口

import from './post = (url, data) => 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 { } }, }}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。