Vue外卖七：ajax请求函数编写（用axios），配置代理用于跨域访问后端

1.ajax请求模块src/api/ajax.js

/*
ajax请求函数模块
返回值: promise对象(异步返回的数据是: response.data)
 */
import Axios from 'axios'

export default function ajax(url='',data={},type='GET'){
	return new Promise(function(resolve,reject){
		let promise
		if(type==='GET'){
			let dataStr=''
			/*遍历data¸拼接形如：name=xiaoming&pwd=123&sex=Female...&
			Object.keys()说明：
			https://www.cnblogs.com/wangshengli520/p/10044952.html*/
			Object.keys(data).forEach(key=>{
				dataStr+= key+'='+data[key]+'&'
			})
			if(dataStr!==''){
				/*取出dataStr字符串从下标0到&下标之间所有字符串，形如：
				name=xiaoming&pwd=123&sex=female
				subString(start,end)说明：
				https://www.w3school.com.cn/js/jsref_substring.asp
				*/
				dataStr=dataStr.subString(0,lastIndexOf('&'))
				
				/* 拼接出真正url，形如：
				 http://baidu.com?name=xiaoming&pwd=123&sex=Female */
				 url=url+'?'+dataStr
			}

			// 发送请get求到服务器
			promise=Axios.get(url)
		}else{
			//发Post请求到服务器
			promise=Axios.post(url,data)
		}

		// 成功则调用resolve,提供数据
		promise.then(response=>{
			resolve(response.data)
		})
		// 失败则调用reject，提供原因
		.catch(error=>{
			reject(error)
		})

	})
}

2.所有接口请求模块src/api/index.js

/*
包含n个接口请求函数的模块
函数的返回值: promise对象
 */
import ajax from './ajax.js'
const BASE_URL='/api'

// 1、根据经纬度获取位置详情 参数geohash--经纬度
export const reqAddress = geohash => ajax(`${BASE_URL}/position/${geohash}`)

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

// 3、根据经纬度获取商铺列表longitude经,latitude纬,也可写：(a,b)=>ajax(...,{longitude:a,latitude:b})
export const reqShops=(longitude,latitude)=>ajax(BASE_URL+'/shops',{longitude,latitude})

// 4、根据经纬度和关键字搜索商铺列表
export const reqSearchShop = (geohash, keyword) => ajax(BASE_URL+'/search_shops', {geohash, keyword})
// 6、用户名密码登陆
export const reqPwdLogin = ({name, pwd, captcha}) => ajax(BASE_URL+'/login_pwd', {name, pwd, captcha}, 'POST')
// 7、发送短信验证码
export const reqSendCode = (phone) => ajax(BASE_URL+'/sendcode', {phone})
// 8、手机号验证码登陆
export const reqSmsLogin = (phone, code) => ajax(BASE_URL+'/login_sms', {phone, code}, 'POST')
// 9、根据会话获取用户信息
export const reqUserInfo = () => ajax(BASE_URL+'/userinfo')
// 10、用户登出
export const reqLogout = () => ajax(BASE_URL+'/logout')

3.配置代理用于跨域访问后端：根目录/config/index.js

找到dev的 proxyTable:{}在其中写入对应代码

dev: {

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