封装params异步请求API

最新推荐文章于 2024-06-03 10:05:11 发布

weixin_46031104

最新推荐文章于 2024-06-03 10:05:11 发布

阅读量479

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_46031104/article/details/108950349

本文档介绍了如何在Vue.js项目中创建request.js和index.js文件，用于封装params参数的异步请求API，实现更高效的数据交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在目录中创建request.js和index.js两个文件

一，目录中request.js

import axios from "axios"

*//判断当前运行环境  development--为开发环境  production-- 为生产环境*
*//根据不同的运行环境设置不同的baseURL*
if(process.env.NODE_ENV == "development"){
    axios.defaults.baseURL = 'http://120.53.31.103:84/'
}
if(process.env.NODE_ENV == "production"){
    axios.defaults.baseURL = "https://wap.365msmk.com/"
}

*//设置请求超时时间*
axios.defaults.timeout = 10000;
*//请求拦截器  所有的请求都会先经过这里*
axios.interceptors.request.use(
    config =>{
    *//设置请求头*
        config.headers = {DeviceType:'H5'}
        return config;
    }
)

*//响应拦截器 - 所有的请求响应先经过这里*
request.interceptors.response.use(config  => {
 // 动画隐藏、错误统一处理等
 console.log('加载完毕')
 return config 
}

*//抛出为get请求的请求方式，并返回一个params对象*
export function get(url,params){
    return new Promise((resolve,reject)=>{
        axios.get(url,params).then(res=>{
            resolve(res)
        }).catch(err=>{
            reject(err)
        })
    })
}

*//抛出为post请求的请求方式，并返回一个params对象*
export function post(url,params){
    return new Promise((resolve,reject)=>{
        axios.post(url,params).then(res=>{
            resolve(res.data)
        }).catch(err=>{
            reject(err.data)
        })
    })
}

二目录中的 index.js

*// 引入抛出的get 和 post请求*
import {
    get,
    post
} from "../http/http"

// Home页面数据
export function getAppHome() {
    return get('api/app/recommend/appIndex')
}
// bannner图数据
export function getAppBanner() {
    return get('api/app/banner')
}
//课程详情
export function getlessonDetails(id) {
    return get('api/app/courseInfo/basis_id=' + id)
}
//课程大纲 
export function getcourseChapter(params) {
    return post('api/app/courseChapter', params)
}
//课程评论 api/app/courseComment
export function getcourseComment(params) {
    return post('api/app/courseComment', params)
}
//讲师详情 
export function get_teacher(id) {
    return get('api/app/teacher/'+id)
}
//讲师详情介绍
export function get_teacher_Info(id) {
    return get('api/app/teacher/info/'+id)
}