能發(fā)起ajax請求的函數(shù)模塊

:方法一

函數(shù)的返回值是promise對象

//如果使用npm加載axios則只需要在入口文件main中引入即可
import axios from 'axios'
export default function ajax(url, data=>{ }, type='GET'){
//發(fā)送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{
//發(fā)送POST請求
  retuen axios.post(url,data)
}
 
}

進(jìn)行接口請求封裝

import ajax from './ajax'
//假設(shè)注冊接口
export const  reqRegister = （user）=>ajax('/register', user ,'POST')
//登錄接口
export const  reqLogin = （{username,password}）=>ajax('/login', {username,password} , 'POST')

:方法二

/* 
封裝的能發(fā)ajax請求的函數(shù), 向外暴露的本質(zhì)是axios
1. 解決post請求攜帶參數(shù)的問題: 默認(rèn)是json, 需要轉(zhuǎn)換成urlencode格式
2. 讓請求成功的結(jié)果不再是response, 而是response.data的值
3. 統(tǒng)一處理所有請求的異常錯(cuò)誤
*/
import axios from 'axios'
import qs from 'qs'
import {message} from 'antd'

// 添加請求攔截器: 讓post請求的請求體格式為urlencoded格式 a=1&b2
// 在真正發(fā)請求前執(zhí)行
axios.interceptors.request.use(function (config) {
  // 得到請求方式和請求體數(shù)據(jù)
  const {method, data} = config
  // 處理post請求, 將data對象轉(zhuǎn)換成query參數(shù)格式字符串
  if (method.toLowerCase() === 'post' && typeof data==='object') {
    config.data = qs.stringify(data) // username=admin&password=admin
  }

  return config
})


// 添加響應(yīng)攔截器
  // 功能1: 讓請求成功的結(jié)果不再是response, 而是response.data的值
  // 功能2: 統(tǒng)一處理所有請求的異常錯(cuò)誤
// 在請求返回之后且在我們指定的請求響應(yīng)回調(diào)函數(shù)之前
axios.interceptors.response.use(function (response) {
  
  return response.data // 返回的結(jié)果就會(huì)交給我們指定的請求響應(yīng)的回調(diào)
  // return response // 返回的結(jié)果就會(huì)交給我們指定的請求響應(yīng)的回調(diào)
}, function (error) { // 統(tǒng)一處理所有請求的異常錯(cuò)誤
  message.error('請求出錯(cuò) ' + error.message)
  // return Promise.reject(error);
  // 返回一個(gè)pending狀態(tài)的promise, 中斷promise鏈
  return new Promise(() => {})
});


export default axios

進(jìn)行接口請求封裝

/* 
包含應(yīng)用中所有請求接口的函數(shù): 接口請求函數(shù)
函數(shù)的返回值都是promise對象
*/
import jsonp from 'jsonp'  // axios不能發(fā)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
})

// 根據(jù)分類id獲取分類
export const reqCategory = (categoryId) => ajax(BASE + '/manage/category/info', {
  params: {
    categoryId
  }
})