axios封装接口思路

axios封装接口思路

1.安装axios并引入

cnpm i axios --save

2.创建一个http.js文件 引入axios 封装get和post方法 以及开发及上线运用到的接口 还有一些请求超时

import axios from "axios" // 判断接口 如果是开发环境 接口就用http://120.53.31.103:84/开头 if (process.env.NODE_ENV == "development") { axios.defaults.baseURL = "http://120.53.31.103:84/" } // 如果是生产环境 接口就用https://wap.365msmk.com/开口 if (process.env.NODE_ENV == "production") { aixos.defaults.baseURL = "https://wap.365msmk.com/" } //设置超出时间 axios.defaults.timeout = 3000 // 请求拦截 axios.interceptors.request.use( config => { config.headers = { DeviceType: 'H5' } return config } ) // 封装get方法 并抛出 export function get(url, params) { return new Promise((resolve, reject) => { axios.get(url, { params: params }).then(res => { resolve(res) }).catch(err => { reject(err) }) }) } // 封装post方法 并抛出 export function post(url, params) { return new Promise((resolve, reject) => { axios.post(url,params).then(res => { resolve(res.data) }).catch(err => { reject(err.data) }) }) }

在创建一个api.js文件 主要就是写一些封装接口

// 引入get 和post方法 import {get,post} from '../Http/Http'; export function getAppIndex(){ return get('api/app/recommend/appIndex') } export function banner(){ return get('api/app/banner') } export function jiangshi(id){ return get('api/app/courseInfo/basis_id='+id) } export function laoshi(id){ return get('api/app/teacher/198') }

然后再对应文件里去获取接口

<script> //引入接口模块 import { getAppIndex } from "../../../api/Api"; export default { data() { return { list: [], }; }, //不一定用async函数 这只是其中的一种方法 async mounted() { var list = await getAppIndex(); this.list = list.data.data[0].list }, }

这样差不多就完成了