1.建立vue專案命令

vue init webpack deaxios # 使用腳手架建立專案 deaxios（專案名，隨便取得） 
cd deaxios # 進入專案 
npm install [email protected] # 安裝axios 
npm i element-ui -S # 安裝element-ui到當前專案

一個yes 三個no

1.1前端專案目錄結構規範

2.封裝axios

2.1建立src/http資料夾

　　用來放網路請求相關的檔案

2.2 src/http/index.js　

資料夾下, 建立 index.js 檔案, 對axios進行封裝

/* eslint-disable 
 
*/
// 第一步：例項化axios物件，簡單封裝 




const axios = require('axios');            // 生成一個axios例項 
axios.defaults.baseURL = 'http://127.0.0.1:8000';   // 設定請求後端的URL地址 
axios.defaults.timeout = 10000;            // axios請求超時時間 
axios.defaults.withCredentials = true; 




axios.defaults.headers['Content-Type'] = 'application/json';    //
 
 axios傳送數 據時使用json格式 
axios.defaults.transformRequest = data => JSON.stringify(data);  // 傳送資料前進 行json格式化




// 第二：設定攔截器 
/**
** 請求攔截器(當前端傳送請求給後端前進行攔截) 
*例1：請求攔截器獲取token設定到axios請求頭中，所有請求介面都具有這個功能
*例2：到使用者訪問某一個頁面，但是使用者沒有登入，前端頁面自動跳轉 /login/ 頁面 
*/




axios.interceptors.request.use(config => {
        
 
// 從localStorage中獲取token
        // let token = localStorage.getItem('token');
        // 如果有token, 就把token設定到請求頭中Authorization欄位中 
        // token && (config.headers.Authorization = token);
    return config; 
}, error => {
    return Promise.reject(error);
});
/**
* 響應攔截器（當後端返回資料的時候進行攔截）
* 例1：當後端返回狀態碼是401/403時，跳轉到 /login/ 頁面 
*/


axios.interceptors.response.use(response => {
    // 當響應碼是 2xx 的情況, 進入這裡
    // debugger
    return response.data; 
}, error => {
    // 當響應碼不是 2xx 的情況, 進入這裡
    // debugger
    return error 
});


/**
* get方法，對應get請求
* @param {String} url [請求的url地址] 
 * @param {Object} params [請求時攜帶的引數] 
 * */ 




export function get(url, params, headers) {
    return new Promise((resolve, reject) => { 
        axios.get(url, { params, headers }).then(res => { 
            resolve(res)
        }).catch(err => {
            reject(err) 
}) 
})
}


// 第三：根據上面分裝好的axios物件，封裝 get、post、put、delete請求 
/**
 * post方法，對應post請求 
 * * @param {String} url [請求的url地址] 
 * * @param {Object} params [請求時攜帶的引數] 
 **/ 




export function post(url, params, headers) { 
    return new Promise((resolve, reject) => { 
        axios.post(url, params, headers).then((res) => { 
            resolve(res)
        }).catch((err) => {
            // debugger
            reject(err) 
}) 
 }) }


export function put(url, params, headers) { 
    return new Promise((resolve, reject) => {
        axios.put(url, params, headers).then((res) => { 
            resolve(res) 
        }).catch((err) => { 
            // debugger 
            reject(err) 
})  }) }






export function del(url, params, headers) {
    return new Promise((resolve, reject) => {
        axios.delete(url, { data: params, headers }).then((res) => { 
            resolve(res)
        }).catch((err) => {
            // debugger
            reject(err) 
})  }) }




export default axios;

/* eslint-disable */ 
import { get, post, put, del } from './index'


// 使用者登入 
export const login = (params, headers) => post("/login/", params, headers)

　　目錄下建立 apis.js檔案, 用來寫 介面地址列表