axios封装---项目中实际应用

    

axios封装---项目中实际应用

需要两个js,一个是http.js 一个是 api.js
首先 http.js 的代码是:

import axios from 'axios';
import QS from 'qs';
/**
 * 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方法,对应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.js 的代码

import { get, post } from './http'
export const apiMaddress = res => get(process.env.API_HOST + 'admin/account/maddress', res); // 查询
export const apiAddress = res => post(process.env.API_HOST + 'admin/account/address', res); // 添加

这个是使用:
首先先引入

import { apiMaddress } from './api';
import { apiAddress } from './api';

这里是需要什么就引入什么,api的接口一定要做好注释
这里是调用(get)

apiMaddress().then(res => {
    // 获取数据成功后的其他操作
    console.log(res)
})

这个是 post 的调用

apiAddress({
    time: '2019/05/11',
    pn: 1
}).then(res => {
    // 获取数据成功后的其他操作
    console.log(res)
})

get和post的区别只是加不加参数而已(此代码已经实际项目中使用,项目已上线)

所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网,如果有侵权内容、不妥之处,请联系我们删除。敬请谅解!

添加新评论

  关于博主

QQ:1960727927
E-Mail:ceet@vip.qq.com
个人主页:https://tencent.信息

  近期评论

  •  osc_omoo: 前端加密后端解密吧?你不会用的是nodejs吧?改成java的后端解密麻烦吗?
  •  环洋诚信SSL证书客服: 按照博主的思路和代码,我已经搭建成功了。但是有一个小小的问题想请教下,重新执行安装代码后,之前...
  •  澄弘: 已经添加了你的博客

只有脚踏实地的人,才能够说:路,就在我的脚下。

无论你选择做什么,追求完美的程度决定你成就的高度。

这个世界最脆弱的是生命,身体健康,很重要。

上帝说:你要什么便取什么,但是要付出相当的代价。

现在站在什么地方不重要,重要的是你往什么方向移动。