vue-ajax/axios请求函数封装: axios+promise

项目文件目录/src/api

ajax.js
/**
 * ajax 请求函数模块
 * 返回值为promise对象
 */
import axios from 'axios'
export default function ajax (url, data = {}, type = 'GET') {
  return new Promise((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)
      })
  })
}

index.js

举例:接口请求函数封装: 每个后台

/**
 * 包含n个接口函数的模块
 * 返回值为promise对象
 *
 * 1、根据经纬度获取位置详情
 * 2、获取食品分类列表
 * 3、根据经纬度获取商铺列表
 * 4、根据经纬度和关键字搜索商铺列表
 * 5、获取一次性验证码
 * 6、用户名密码登陆
 * 7、发送短信验证码
 * 8、手机号验证码登陆
 * 9、根据会话获取用户信息
 * 10、用户登出
 */
import ajax from './ajax'

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

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

// 3、根据经纬度获取商铺列表
export const reqShops = (latitude, longitude) => ajax('/shops', {
  latitude,
  longitude
})

// 4、根据经纬度和关键字搜索商铺列表
export const reqShopsSearch = (geohash, keyword) => ajax('/search_shops', {
  geohash,
  keyword
})

// 5、获取一次性验证码
export const reqCaptcha = () => ajax('/captcha')

// 6、用户名密码登陆
export const reqPwdLogin = (name, pwd, captcha) => ajax('/api/login_pwd', {
  name,
  pwd,
  captcha
}, 'POST')

// 7、发送短信验证码
export const reqSendCode = phone => ajax('/api/sendcode', {
  phone
})

// 8、手机号验证码登陆
export const reqSmsLogin = (phone, code) => ajax('/api/login_sms', {
  phone,
  code
}, 'POST')

// 9、根据会话获取用户信息
export const reqUser = () => ajax('/api/userinfo')

// 10、用户登出
export const reqLogout = () => ajax('/api/logout')

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个基于AxiosVue和TypeScript的封装Ajax请求示例: ```typescript import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'; import { Vue } from 'vue-property-decorator'; // 定义全局配置 axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.timeout = 5000; // 定义请求拦截器 axios.interceptors.request.use((config: AxiosRequestConfig) => { // 在请求发送前做一些处理,例如添加token等 const token = localStorage.getItem('token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }, (error) => { return Promise.reject(error); }); // 定义响应拦截器 axios.interceptors.response.use((response: AxiosResponse) => { // 在响应返回后做一些处理,例如判断是否登录失效等 const data = response.data; if (data.code === 401) { Vue.prototype.$message.error('登录失效,请重新登录!'); localStorage.removeItem('token'); location.href = '/login'; } return response; }, (error) => { return Promise.reject(error); }); // 定义请求方法 export const ajax = { get<T>(url: string, params?: any): Promise<T> { return axios.get(url, { params }).then((res: AxiosResponse) => res.data); }, post<T>(url: string, data?: any): Promise<T> { return axios.post(url, data).then((res: AxiosResponse) => res.data); }, put<T>(url: string, data?: any): Promise<T> { return axios.put(url, data).then((res: AxiosResponse) => res.data); }, delete<T>(url: string, params?: any): Promise<T> { return axios.delete(url, { params }).then((res: AxiosResponse) => res.data); } }; ``` 使用时可以直接引入`ajax`对象调用相应的请求方法: ```typescript import { ajax } from './ajax'; // 发送GET请求 ajax.get('/users', { page: 1, limit: 10 }).then((data) => { console.log(data); }).catch((error) => { console.error(error); }); // 发送POST请求 ajax.post('/users', { name: '张三', age: 18 }).then((data) => { console.log(data); }).catch((error) => { console.error(error); }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值