• 1.初始vue化專案
• 2.封裝axios
  • 2.1 建立src/http資料夾
  • 2.2 src/http/index.js
  • 2.3 src/http/apis.js介面地址

1.初始vue化專案

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

• 前端專案結構規範

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;

 

2.3 src/http/apis.js介面地址

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

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

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