axios封装接口思路

最新推荐文章于 2024-07-28 19:57:58 发布

jie_ge_a

最新推荐文章于 2024-07-28 19:57:58 发布

阅读量402

点赞数

分类专栏：接口封装 vue 文章标签： vue 接口

本文链接：https://blog.csdn.net/jie_ge_a/article/details/108950695

版权

vue 同时被 2 个专栏收录

15 篇文章 1 订阅

订阅专栏

接口封装

0 篇文章 0 订阅

订阅专栏

本文介绍了axios接口的封装过程，包括安装axios、创建http.js文件封装get和post方法、配置开发和线上环境接口，以及在api.js中定义具体接口。通过这种方式，可以在应用中便捷地调用和管理接口。

摘要由CSDN通过智能技术生成

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
    },
    }