axios封裝

1. 始vue化專案

https://www.cnblogs.com/xiaonq/p/11027880.html

vue init webpack deaxios # 使用腳手架建立專案 deaxios（專案名，隨便取得）
cd deaxios # 進入專案
npm install axios@0.19.2 # 安裝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)