封装Ajax函数

最新推荐文章于 2024-06-22 12:23:42 发布

ZhandsomeZ

最新推荐文章于 2024-06-22 12:23:42 发布

阅读量1.9w

点赞数 1

分类专栏：前端工具文章标签： js ajax es6 javascript

本文链接：https://blog.csdn.net/handsomezhanghui/article/details/106218738

版权

前端工具专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在这里插入图片描述

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了