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);
}

vue封装接口

悦读