vue封裝API接口

第一步：

首先引入axios

然后創建兩個文件夾api和http

 

http.js 里面的

import axios from 'axios';//引入axios
 
//環境的切換 開發環境(development)使用的是測試接口  和   生產環境(production)使用的是上線接口
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=5000;//加載不出來5秒之后就是加載失敗
axios.interceptors.request.use(
    config=>{
        config.headers={DeviceType:'H5'}//可每次發送請求之前的邏輯處理 比如判斷token
        return config;
    }
)
// axios.interceptors.response.use(
//     response=>{
//       return response;
//     },
//     error=>{
//         if(error.response.status){

//         }
//     }
// )

// 使用promise返回axios請求的結果
export function get(url, params) {
        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,params).then(res=>{
                resolve(res.data)
            }).catch(err=>{
                reject(err.data)
            })
    
        })
    }  

api.js里面的

import { get, post } from "../http/http" //引入封裝好的get和post方法
// 封裝請求的方式
export function getBanners() {//輪播
    return get('api/app/banner')
}

export function getIndex(){//首頁數據
    return get('api/app/recommend/appIndex')
}

然后在vue里面的文件應用

import { getBanners, getIndex } from "../api/api";//引入api里面定義的方法

async mounted() {
    var swiperr = await getBanners();
    console.log(swiperr.data.data);
    this.swipers = swiperr.data.data; //輪播圖渲染

    var strr = await getIndex();
    console.log(strr); //明星講師渲染
    this.strs = strr.data.data;
    console.log(this.strs);
  },

 

 然后就沒有然后了