Vue實例中封裝api接口的思路 在頁面中用async,await調用方法請求

一般我們寫小型的項目是用不到封裝axios實例

但是當我們寫大型項目時  接口有時候多到有上百個接口，那我們在請求一次調用一次接口，接口上好多都是重復的,這個時候我們就可以封裝axios實例，既節省了事件。有可以少些好多代碼

首先我們要先安裝axios

npm i axios --save

然后在vue項目中要創建兩個文件夾api文件和http文件 當然文件名是自定義的

    

 

 

 

在http文件下http.js中要這樣寫

import axios from 'axios';

//環境的切換 環境指的就是開發環境和生產環境
//開發環境(development) 中用到的是測試接口 
if (process.env.NODE_ENV == 'development') {
    axios.defaults.baseURL = 'http://120.53.31.103:84/'
}
//通過if判斷處於開發環境還是生產環境
if (process.env.NODE_ENV == 'production') {
    axios.defaults.baseURL = 'https://www.365msmk.com/'
}

//設置請求超時的事件
axios.defaults.timeout = 5000;
// 請求攔截
axios.interceptors.request.use(
    config => {
        //獲取輪播圖要設置的頭信息
        config.headers = { DeviceType: 'H5' }
        //可每次發送請求之間的邏輯處理 ，比如判斷token
        return config
    }
)
// 響應攔截
axios.interceptors.response.use(
    response => {
        //如果返回的·狀態碼為200時，說明接口請求成功
        return response
    },
    error => {
        if (error.response.status) {
        }
    }
)
//設置get請求方式 用promise方式返回的實例來實現
export function get(url, params) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params: params
        }).then(res => {
            resolve(res)
        }).catch(err => {
            reject(err)
        })
    })
}

//設置post請求方式 用promise方式返回的實例來實現
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文件下api.js中要這樣

首先要引入我們上個http.js文件中的兩種請求方式post,get

import { post, get } from '../http/http.js'

//首頁講師和精選課堂  資訊數據的請求
//Indexlist是我們定義的函數名  用於·在后面調用方法
export function Indexlist() {
// return get('這里面寫的是請求接口后面需要拼接的一部分')
    return get('api/app/recommend/appIndex')
}
//輪播圖數據的請求
export function Indexbanner() {
    return get('api/app/banner')
}

　　

在vue組件中要這樣應用

 

---

import {Indexlist} from "../api/api.js";
//首先要引用api文件中當時定義的方法名 這樣也用到了解構賦值 ，提取api.js文件中我們要用的數據 

async mounted() {
   //這里也可以用到async await語法
    var ids = this.$route.query.item;
    //接收上個頁面傳過來的id名
    var objlist = await Indexlist({ id: ids });

 console.log(objlist) 
//打印我們請求那個接口，看下有數據沒

this.CommentList = [...objlist.data.list];
//定義一個數組用擴展運算符進行賦值 console.log(this.CommentList);
}