摘要：當然不限于此種寫法，還有其他的寫法可網上搜索封裝參考執行異步請求發請求配置對象指定請求參數發請求如果成功了調用如果失敗了不調用而是提示異常信息請求出錯了要求能根據接口文檔定義接口請求包含應用中所有接口請求函數的模塊每個函數的返回值都是基本要

當然不限于此種寫法，還有其他的寫法可網上搜索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). 基本原理
瀏覽器端:

  動態生成