api接口封裝


api接口封裝

作用:為了以后修改接口方便,如果項目很大,在每一個頁面里修改接口的話,很麻煩,所以封裝在一個文件里,找起來也很方便

在 src 中新建一個文件 nectwork,nectwork中新建兩個js文件

http.js 中 

import axios from 'axios'
// 環境的切換 環境指的是就是開發環境 和 生產環境(npm run build之后)
// 開發環境(development)中用到的是測試接口 生產環境(product)
if (process.env.NODE_ENV == 'development'){
    // 設置默認路徑
    axios.defaults.baseURL = 'http://120.53.31.103:84/'
    
}
if(process.env.NODE_ENV == 'production'){
    axios.defaults.baseURL = 'http://120.53.31.103:84/'
}
// 設置超出時間
axios.defaults.timeout = 10000

// 設置請求頭
axios.interceptors.request.use(
    config=>{
        config.headers={DeviceType:"H5"}
        return config
    }
)

// axios.interceptors.response.use()

// 使用promise返回axios請求的結果(promise)
export function get(url,params){
    console.log(url)
    return new Promise((resolve,reject) =>{
        axios.get(url,{
            params:params
        }).then(res=>{
            resolve(res)
        }).catch(err=>{
            reject(err)
        })
    })
}
export function post(url,params){
    return new Promise((resolve,reject)=>{
        axios.post(url,{
            prarms:params
        }).then(res=>{
            resolve(res)
        }).catch(err=>{
            reject(err)
        })
    })
}

api.js 中 寫接口

import {get,post} from './http'   // 引入http文件
// 封裝一個獲取首頁數據的方法 getAppIndedx
export function getAppIndedx(){
    return get('api/app/recommend/appIndex')
} 
// 輪播
export function getBannerIndedx(){
    return get('api/app/banner')
}

// 課程詳情
export function getDetails(id){
    return get('api/app/courseInfo/basis_id='+id)
}

// 課程大綱
export function getDagang(){
    return post('api/app/courseChapter')
}

在當前組件中

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM