vue封装接口

需要创建俩个js文件 http.js 和 api.js

在http.js中引入axios，对get和post进行封装请求方式，在这里可以设置请求头和超时时间，也可以进行环境的切换，这里的环境指的是开发环境和生产环境，也可以设置请求拦截和响应拦截

在http.js中

//第一步:引入axios import axios from 'axios'; //在这里设置开发环境和生产环境的默认路径 //development是开发环境 production是生产环境 if(process.env.NODE_ENV=='development'){ axios.defaults.baseURL='http://120.53.31.103:84/api/app/' } if(process.env.NODE_ENV=='production'){ axios.defaults.baseURL='https://wap.365msmk.com' } //这里是设置请求超时时间 时间为5秒 axios.defaults.timeout=5000; //在请求拦截里设置权限 这里是设置的是H5的权限 //如果不设置的话数据会请求失败或为空数据，在这里也可以用来判断token 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中

//引入http.js中的get和post请求 import {get,post} from "../http/http.js" //对请求的数据进行封装 export function getBanner(){ return get("banner") }

在vue文件中使用封装好的方法

//引入封装好的方法getBanner import { getBanner} from "../../api/api.js"; async mounted() { var a = await getBanner(); //此时就能打印出数据 console.log(a); }