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

當(dāng)然不限于此種寫法，還有其他的寫法可網(wǎng)上搜索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. 執(zhí)行異步ajax請求
if(type==="GET") { // 發(fā)GET請求
  promise = axios.get(url, { // 配置對象
    params: data // 指定請求參數(shù)
  })
} else { // 發(fā)POST請求
  promise = axios.post(url, data)
}
// 2. 如果成功了, 調(diào)用resolve(value)
promise.then(response => {
  resolve(response.data)
// 3. 如果失敗了, 不調(diào)用reject(reason), 而是提示異常信息
}).catch(error => {
  // reject(error)
  message.error("請求出錯了: " + error.message)
})

})

}

// api/index.js
/*
要求: 能根據(jù)接口文檔定義接口請求
包含應(yīng)用中所有接口請求函數(shù)的模塊
每個函數(shù)的返回值都是promise

基本要求: 能根據(jù)接口文檔定義接口請求函數(shù)
*/
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})

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

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

})

// 搜索商品分頁列表 (根據(jù)商品描述)
/*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請求的接口請求函數(shù)
*/
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`
// 發(fā)送jsonp請求
jsonp(url, {}, (err, data) => {
  console.log("jsonp()", err, data)
  // 如果成功了
  if (!err && data.status==="success") {
    // 取出需要的數(shù)據(jù)
    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). 基本原理
瀏覽器端:

  動態(tài)生成