封装axios+Promise

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 就可以直接获取成功回调的返回结果！

猜你喜欢