（十四）硅谷外卖前端部分-前后台交互 ajax

Posted 2021-12-29 mxsf

一、下载依赖包

npm install --save axios

二、封装 ajax 请求模块

2.1 api/ajax.js

import axios from ‘axios‘

export default function ajax(url = ‘‘, data = , type = ‘GET‘) 
    return new Promise(function (resolve, reject) 
        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(response => 
            resolve(response.data)
        )
            .catch(error => 
                reject(error)
            )
    )

2.2 api/index.js

import ajax from ‘./ajax‘

/**
 * 获取地址信息(根据经纬度串)
 */
export const reqAddress = geohash => ajax(‘/api/position/‘ + geohash)
/**
 * 获取 msite 页面食品分类列表
 */
export const reqCategorys = () => ajax(‘/api/index_category‘)
/**
 * 获取 msite 商铺列表(根据经纬度)
 */
export const reqShops = (latitude, longitude) => ajax(‘/api/shops‘, latitude,
    longitude)
/**
 * 账号密码登录
 */
export const reqPwdLogin = (name, pwd, captcha) => ajax(‘/api/login_pwd‘, 
    name,
    pwd,
    captcha
, ‘POST‘)
/**
 * 获取短信验证码
 */
export const reqSendCode = phone => ajax(‘/api/sendcode‘, phone)
/**
 * 手机号验证码登录
 */
export const reqSmsLogin = (phone, code) => ajax(‘/api/login_sms‘, phone, code, ‘POST‘)
/**
 * 获取用户信息(根据会话)
 */
export const reqUser = () => ajax(‘/api/userinfo‘)
/**
 * 请求登出
 */
export const reqLogout = () => ajax(‘/api/logout‘)

三、配置代理

babel.config.js

proxyTable: 
    ‘/api‘:  // 匹配所有以 ‘/api‘开头的请求路径
      target: ‘http://localhost:4000‘, // 代理目标的基础路径
      changeOrigin: true, // 支持跨域
      pathRewrite: // 重写路径: 去掉路径中开头的‘/api‘
        ‘^/api‘: ‘‘