ajax请求模块:
/*
ajax 请求函数模块
*/
import axios from 'axios'
/**
* 向外部暴漏一个函数 ajax
* @param {*} url 请求路径,默认为空
* @param {*} data 请求参数,默认为空对象
* @param {*} type 请求方法,默认为GET
*/
export default function ajax (url = '', data = {}, type = 'GET') {
// 返回值 Promise对象 (异步返回的数据是response.data,而不是response)
return new Promise(function (resolve, reject) {
// (利用axios)异步执行ajax请求
let promise // 这个内部的promise用来保存axios的返回值(promise对象)
if (type === 'GET') {
// 准备 url query 参数数据
let dataStr = '' // 数据拼接字符串,将data连接到url
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()
resolve(response.data)
}).catch(error => {
// 失败回调reject()
reject(error)
})
})
}
调用:
引入上面封装的ajax模块,这里面注意路径问题
import ajax from './ajax'
const BASE_URL = '/api' //跨域处理
/**
* 根据经纬度和关键字搜索商铺列表
*/
export const reqSearchShop = (geohash, keyword) => ajax(BASE_URL + '/search_shops', {geohash, keyword})
/**
* 账号密码登录
*/
export const reqPwdLogin = ({name, pwd, captcha}) => ajax(BASE_URL + '/login_pwd', {name, pwd, captcha}, 'POST')
Vue组件中使用下面的方式调用:
async login () {
result = await reqPwdLogin({name, pwd, captcha})
}
注意:await 相当于 Promise对象调用了then函数,也就是await Promise 就可以直接获取成功回调的返回结果!