vue 模塊化開發

vue 模塊化開發

安裝axios
cnpm install axios --save

好處：
可以在在向後臺請求接口前可以對數據進行處理
我們把api都寫在一個接口上，便於後期維護、管理。

首先對axios進行二次封裝
封裝過程：在項目的src文件夾下創建文件夾（名稱可以自定義） 在該文件夾下 新建js文件 文件名可以自定義
然後在該js文件中寫入以下代碼

serve.js

        import axios from 'axios'
        // var server = function() {
            var server = axios.create({
                baseURL: '',  //接口代理
                timeout: 10000  //請求接口超時時間
            })
           // 請求攔截 後臺沒有接收到請求 但是瀏覽器發出請求了 這個可以在攔截器寫自己的邏輯或者添加請求頭配置
            server.interceptors.request.use(config => {
                // console.log(config)
                // 可以寫自己的對應的邏輯 
                // config.headers['my-token'] = '122fdasdjfawpoekroqp2k3l4maeid0woqke'
                //contentType的參考地址 https://www.cnblogs.com/tugenhua0707/p/8975121.html
                //config.headers.ContentType = 'application/json'

                // return 之後接口才會真正的連接後臺接口 進行請求
                return config
            })
            //響應攔截 在後臺給出相應數據後 在這裏可以對數據進行預處理 還可以對錯誤代碼字典進行預處理
            server.interceptors.response.use(response => {
                // console.log(response)
                // switch(response)
                // 可以寫自己的判斷邏輯
                return response.data.data
            }, (error) =>{
                console.log(error)
                switch(error) {
                    case 404:
                        alert('請求地址錯誤')
                    break;
                    case 500:
                        alert('服務器錯誤')
                    break;
                }
            })
        // }
        export default server

    設置請求頭的意思就是 請求頭中有自己的默認設置信息 例如 請求頭中的參數內容類型默認爲json類型 我們必要時可以設置成表單提交類型
    再比如 我們在通常項目中 用戶的權限會涉及到token token需要攜帶在請求頭中 則可以登錄成功後獲取的token加入到請求頭中
    例如 config.headers['my-token'] = '122fdasdjfawpoekroqp2k3l4maeid0woqke'
    
    然後在src文件夾下創建api文件夾（文件夾可以隨意命名） 在該文件夾下創建自己的api請求集合文件 （文件名稱可以隨意命名）
    然後導出自己的api集合
    然後在需要api的文件夾中 導入對應的api 

api.js

import server from './server'
var homeMix = function() {
    return new Promise((resolve, reject)=> {
        server.get('/home/mix').then(res => {
            resolve(res)
        })
    })
    
}
var navList = function() {
    return new Promise((resolve, reject) => {  
        server.get('/cate/recList?cid=&ct=').then(res => {
            resolve(res)
        })
    })
}
// getHomeMin().then(res => {

// })
export default {
    homeMix,
    navList
}

然後把api.js文件引入到相關的組件（import navList from ‘./api’）
在組件中使用

  navList.navList().then(res=>{   //利用promise的成功回調
                 console.log(res)  //這裏就是你請求到的數據
            })