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

一、下载依赖包

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‘: ‘‘
      }
    }
}

原文地址：https://www.cnblogs.com/mxsf/p/10989487.html