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

在當前組件中