ajax请求封装

能发起ajax请求的函数模块

:方法一

函数的返回值是promise对象

//如果使用npm加载axios则只需要在入口文件main中引入即可
import axios from 'axios'
export default function ajax(url, data=>{ }, type='GET'){
//发送GET请求
if(type==='GET'){ 
//拼接字符串
//data:{username :tom,password:123}
//paramStr:username=tom&password=123
let paramStr=' '
Object.keys(data).forEach(key=>{
 paramStr += key + ' = ' + data[key] + ' & '
})
if(paramStr){
  paramStr=paramStr.substring(0, paramStr.length-1)
}
  return axios.get(url + ' ? ' +paramStr)
}else{
//发送POST请求
  retuen axios.post(url,data)
}
 
}

进行接口请求封装

import ajax from './ajax'
//假设注册接口
export const  reqRegister = （user）=>ajax('/register', user ,'POST')
//登录接口
export const  reqLogin = （{username,password}）=>ajax('/login', {username,password} , 'POST')

:方法二

/* 
封装的能发ajax请求的函数, 向外暴露的本质是axios
1. 解决post请求携带参数的问题: 默认是json, 需要转换成urlencode格式
2. 让请求成功的结果不再是response, 而是response.data的值
3. 统一处理所有请求的异常错误
*/
import axios from 'axios'
import qs from 'qs'
import {message} from 'antd'

// 添加请求拦截器: 让post请求的请求体格式为urlencoded格式 a=1&b2
// 在真正发请求前执行
axios.interceptors.request.use(function (config) {
  // 得到请求方式和请求体数据
  const {method, data} = config
  // 处理post请求, 将data对象转换成query参数格式字符串
  if (method.toLowerCase() === 'post' && typeof data==='object') {
    config.data = qs.stringify(data) // username=admin&password=admin
  }

  return config
})


// 添加响应拦截器
  // 功能1: 让请求成功的结果不再是response, 而是response.data的值
  // 功能2: 统一处理所有请求的异常错误
// 在请求返回之后且在我们指定的请求响应回调函数之前
axios.interceptors.response.use(function (response) {
  
  return response.data // 返回的结果就会交给我们指定的请求响应的回调
  // return response // 返回的结果就会交给我们指定的请求响应的回调
}, function (error) { // 统一处理所有请求的异常错误
  message.error('请求出错 ' + error.message)
  // return Promise.reject(error);
  // 返回一个pending状态的promise, 中断promise链
  return new Promise(() => {})
});


export default axios

进行接口请求封装

/* 
包含应用中所有请求接口的函数: 接口请求函数
函数的返回值都是promise对象
*/
import jsonp from 'jsonp'  // axios不能发jsonp请求
import ajax from './ajax'
import { message } from 'antd';

// const BASE = 'http://localhost:5000'
const BASE = ''

// 请求登陆
export const reqLogin = (username, password) =>  ajax.post(BASE + '/login', {username, password})
// 添加分类
export const reqAddCategory = (categoryName) => ajax.post(BASE + '/manage/category/add', {
  categoryName
})
// 修改分类
export const reqUpdateCategory = ({categoryId, categoryName}) => ajax.post(BASE + '/manage/category/update', {
  categoryId,
  categoryName
})

// 根据分类id获取分类
export const reqCategory = (categoryId) => ajax(BASE + '/manage/category/info', {
  params: {
    categoryId
  }
})