封装Ajax函数

封装Ajax函数_第1张图片

Ajax

说道ajax到底什么是ajax? ajax是一种创建交互网页应用的一门技术。
ajax的应用场景有:(地图)实时更新,表单验证等等....
所以要再次结合promise对Ajax进行封装以便于项目开发

ajax请求函数模块

返回值: promise对象(异步返回的数据是: response.data)
 */
import axios from 'axios'
export default function ajax(url, data = {}, type = 'GET') {

    return new Promise(function(resolve, reject) {
        // 执行异步ajax请求
        let promise
        if (type === 'GET') {
            // 准备url query参数数据
            let dataStr = '' //数据拼接字符串
            Object.keys(data).forEach(key => {
                dataStr += key + '=' + data[key] + '&'
            })
            if (dataStr !== '') {
                dataStr = dataStr.substring(0, dataStr.lastIndexOf('&'))
                url = url + '?' + dataStr
            }
            // 发送get请求
            promise = axios.get(url)
        } else {
            // 发送post请求
            promise = axios.post(url, data)
        }
        promise.then(function(response) {
            // 成功了调用resolve()
            resolve(response.data)
        }).catch(function(error) {
            //失败了调用reject()
            reject(error)
        })
    })
}

项目中使用

import ajax from './ajax'
//1.获取位置
export const reqAddress = (geohash) => ajax(`${BASE_URL}/position/${geohash}`);

//2.获取食品分类列表](#2获取食品分类列表)
export const reqFoodCategorys = () => ajax(BASE_URL + '/index_category');

//3.根据经纬度获取商铺列表](#3根据经纬度获取商铺列表)
export const reqShops = (longitude, latitude) => ajax(BASE_URL + '/shops', { longitude, latitude });
//这样就可以愉快的使用封装好的Ajax了

你可能感兴趣的:(前端工具,js,ajax,es6,javascript)