[TOC] ### 封裝 axios get post 方法 作者：愣錘 鏈接：https://juejin.im/post/5b55c118f265da0f6f1aa354 來源：掘金 著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。 ***** * [ ] get方法：get函數有兩個參數，第一個參數表示我們要請求的url地址，第二個參數是我們要攜帶的請求參數。get函數返回一個promise對象，當axios其請求成功時resolve服務器返回 值，請求失敗時reject錯誤值。最后通過export拋出get函數。 ``` /** * get方法，對應get請求 * @param {String} url [請求的url地址] * @param {Object} params [請求時攜帶的參數] */ export function get(url, params){ return new Promise((resolve, reject) =>{ axios.get(url, { params: params }).then(res => { resolve(res.data); }).catch(err =>{ reject(err.data) }) });} ``` ***** * [ ] post方法：原理同get基本一樣，但是要注意的是，post方法必須要使用對提交從參數對象進行序列化的操作，所以這里我們通過node的qs模塊來序列化我們的參數。這個很重要，如果沒有序列化操作，后臺是拿不到你提交的數據的。這就是文章開頭我們import QS from ‘qs’;的原因。如果不明白序列化是什么意思的，就百度一下吧，答案一大堆。 ``` /** * post方法，對應post請求 * @param {String} url [請求的url地址] * @param {Object} params [請求時攜帶的參數] */ export function post(url, params) { return new Promise((resolve, reject) => { axios.post(url, QS.stringify(params)) .then(res => { resolve(res.data); }) .catch(err =>{ reject(err.data) }) }); } ``` ***** ## api的統一管理 * [ ] api.js中引入封裝的get和post方法 ``` import { get, post } from './http' ``` * [ ] 例如我們有這樣一個接口，是一個post請求： ``` http://www.baiodu.com/api/v1/users/my_address/address_edit_before ``` * [ ] 我們可以在api.js中這樣封裝： ``` export const apiAddress = p => post('api/v1/users/my_address/address_edit_before', p); ``` >[info] 我們定義了一個`apiAddress`方法，這個方法有一個參數p，p是我們請求接口時攜帶的參數對象。而后調用了我們封裝的`post`方法，`post`方法的第一個參數是我們的接口地址，第二個參數是`apiAddress`的p參數，即請求接口時攜帶的參數對象。最后通過export導出`apiAddress`。 * [ ] 然后在我們的頁面中可以這樣調用我們的api接口： ``` import { apiAddress } from '@/request/api';// 導入我們的api接口 export default { name: 'Address', created () { this.onLoad(); }, methods: { // 獲取數據 onLoad() { // 調用api接口，并且提供了兩個參數 apiAddress({ type: 0, sort: 1 }).then(res => { // 獲取數據成功后的其他操作 ……………… }) } } } ```