[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 => { // 获取数据成功后的其他操作 ……………… }) } } } ```