axios 封裝和使用

固然不限於此種寫法，還有其餘的寫法可網上搜索axios封裝參考
//api/axios.js

import axios from 'axios'
import {message} from 'antd'

export default function ajax(url, data={}, type='GET') {

return new Promise((resolve, reject) => {

let promise
// 1. 執行異步ajax請求
if(type==='GET') { // 發GET請求
  promise = axios.get(url, { // 配置對象
    params: data // 指定請求參數
  })
} else { // 發POST請求
  promise = axios.post(url, data)
}
// 2. 若是成功了, 調用resolve(value)
promise.then(response => {
  resolve(response.data)
// 3. 若是失敗了, 不調用reject(reason), 而是提示異常信息
}).catch(error => {
  // reject(error)
  message.error('請求出錯了: ' + error.message)
})

})

}

// api/index.js
/*
要求: 能根據接口文檔定義接口請求
包含應用中全部接口請求函數的模塊
每一個函數的返回值都是promise

基本要求: 能根據接口文檔定義接口請求函數
*/
import jsonp from 'jsonp'
import {message} from 'antd'
import ajax from './ajax'

// const BASE = 'http://localhost:5000'
const BASE = ''
// 登錄
/*
export function reqLogin(username, password) {
return ajax('/login', {username, password}, 'POST')
}*/
export const reqLogin = (username, password) => ajax(BASE + '/login', {username, password}, 'POST')

// 獲取一級/二級分類的列表
export const reqCategorys = (parentId) => ajax(BASE + '/manage/category/list', {parentId})

// 添加分類
export const reqAddCategory = (categoryName, parentId) => ajax(BASE + '/manage/category/add', {categoryName, parentId}, 'POST')

// 更新分類
export const reqUpdateCategory = ({categoryId, categoryName}) => ajax(BASE + '/manage/category/update', {categoryId, categoryName}, 'POST')

// 獲取一個分類
export const reqCategory = (categoryId) => ajax(BASE + '/manage/category/info', {categoryId})

// 獲取商品分頁列表
export const reqProducts = (pageNum, pageSize) => ajax(BASE + '/manage/product/list', {pageNum, pageSize})

// 更新商品的狀態(上架/下架)
export const reqUpdateStatus = (productId, status) => ajax(BASE + '/manage/product/updateStatus', {productId, status}, 'POST')

/*
搜索商品分頁列表 (根據商品名稱/商品描述)
searchType: 搜索的類型, productName/productDesc
*/
export const reqSearchProducts = ({pageNum, pageSize, searchName, searchType}) => ajax(BASE + '/manage/product/search', {
pageNum,
pageSize,

})

// 搜索商品分頁列表 (根據商品描述)
/*export const reqSearchProducts2 = ({pageNum, pageSize, searchName}) => ajax(BASE + '/manage/product/search', {
pageNum,
pageSize,
productDesc: searchName,
})*/

// 刪除指定名稱的圖片
export const reqDeleteImg = (name) => ajax(BASE + '/manage/img/delete', {name}, 'POST')

// 添加/修改商品
export const reqAddOrUpdateProduct = (product) => ajax(BASE + '/manage/product/' + ( product._id?'update':'add'), product, 'POST')
// 修改商品
// export const reqUpdateProduct = (product) => ajax(BASE + '/manage/product/update', product, 'POST')

// 獲取全部角色的列表
export const reqRoles = () => ajax(BASE + '/manage/role/list')
// 添加角色
export const reqAddRole = (roleName) => ajax(BASE + '/manage/role/add', {roleName}, 'POST')
// 添加角色
export const reqUpdateRole = (role) => ajax(BASE + '/manage/role/update', role, 'POST')

// 獲取全部用戶的列表
export const reqUsers = () => ajax(BASE + '/manage/user/list')
// 刪除指定用戶
export const reqDeleteUser = (userId) => ajax(BASE + '/manage/user/delete', {userId}, 'POST')
// 添加/更新用戶
export const reqAddOrUpdateUser = (user) => ajax(BASE + '/manage/user/'+(user._id ? 'update' : 'add'), user, 'POST')

/*
json請求的接口請求函數
*/
export const reqWeather = (city) => {

return new Promise((resolve, reject) => {

const url = `http://api.map.baidu.com/telematics/v3/weather?location=${city}&output=json&ak=3p49MVra6urFRGOT9s8UBWr2`
// 發送jsonp請求
jsonp(url, {}, (err, data) => {
  console.log('jsonp()', err, data)
  // 若是成功了
  if (!err && data.status==='success') {
    // 取出須要的數據
    const {dayPictureUrl, weather} = data.results[0].weather_data[0]
    resolve({dayPictureUrl, weather})
  } else {
    // 若是失敗了
    message.error('獲取天氣信息失敗!')
  }

})

})
}
// reqWeather('北京')
/*
jsonp解決ajax跨域的原理
1). jsonp只能解決GET類型的ajax請求跨域問題
2). jsonp請求不是ajax請求, 而是通常的get請求
3). 基本原理
瀏覽器端:

動態生成<script>來請求後臺接口(src就是接口的url)
  定義好用於接收響應數據的函數(fn), 並將函數名經過請求參數提交給後臺(如: callback=fn)

服務器端:

接收到請求處理產生結果數據後, 返回一個函數調用的js代碼, 並將結果數據做爲實參傳入函數調用

瀏覽器端:

收到響應自動執行函數調用的js代碼, 也就執行了提早定義好的回調函數, 並獲得了須要的結果數據

*/