本文檔主要是講解一些
axios的基礎(chǔ)配置悴灵，實(shí)際umi項(xiàng)目中一般會(huì)采用dva/fetch去請(qǐng)求數(shù)據(jù)癣籽。如果是想建立簡(jiǎn)單的數(shù)據(jù)請(qǐng)求可以采用這篇文檔去配置氓涣；實(shí)際的項(xiàng)目中如果渊抽，如果項(xiàng)目的業(yè)務(wù)較復(fù)雜雪标，想在umi項(xiàng)目中引入axios發(fā)起數(shù)據(jù)請(qǐng)求零院。可以參考后續(xù)文檔（二）持續(xù)更新中......
引入 安裝 axios
yarn add axios
編寫axios文件
在項(xiàng)目src文件下村刨，新建文件夾apiConfig告抄，新增文件request.js, 編寫axios請(qǐng)求數(shù)據(jù)時(shí)，需要對(duì)URL嵌牺、及返回結(jié)果的處理：
import axios from 'axios'
// 基本配置
axios.defaults.baseURL = "http://localhost:8001/ucc/" //api前綴
const axios= axios.create({
xsrfCookieName: 'xsrf-token' , // `xsrfCookieName` 是用作 xsrf token 的值的cookie的名稱
timeout: 1000, // 如果請(qǐng)求話費(fèi)了超過(guò) `timeout` 的時(shí)間打洼，請(qǐng)求將被中斷
proxy: { // 'proxy' 定義代理服務(wù)器的主機(jī)名稱和端口
host: '10.10.10.198',
port: 9000,
},
});
instance.interceptors.request.use(function (config) {
return config;
}, function (error) {
return Promise.reject(error);
});
instance.interceptors.response.use(function (response) {
return response // 下節(jié)詳述
}, function (error) {
return Promise.reject(error);
});
export default axios;
相應(yīng)結(jié)構(gòu)
某個(gè)請(qǐng)求的響應(yīng)包含以下信息:
{
// `data` 由服務(wù)器提供的響應(yīng)
data: {},
// `status` 來(lái)自服務(wù)器響應(yīng)的 HTTP 狀態(tài)碼
status: 200,
// `statusText` 來(lái)自服務(wù)器響應(yīng)的 HTTP 狀態(tài)信息
statusText: 'OK',
// `headers` 服務(wù)器響應(yīng)的頭
headers: {},
// `config` 是為請(qǐng)求提供的配置信息
config: {},
// 'request'
// `request` is the request that generated this response
// It is the last ClientRequest instance in node.js (in redirects)
// and an XMLHttpRequest instance the browser
request: {}
}
在項(xiàng)目中使用 index.js
import axiosfrom '@/utils/request';
import { stringify } from 'qs'; // 一個(gè)查詢字符串解析和字符串化庫(kù)龄糊，增加了一些安全性。
componentDidMount() {
let params={
pageSize:10,
pageIndex:1,
}
// 執(zhí)行g(shù)et請(qǐng)求：
axios.get(`ucc/modules/basic/part_info/partInfoList?${stringify(params)}`)
.then((res) => {
console.log('res', res)
})募疮；
// 執(zhí)行post請(qǐng)求：
axios.get(`ucc/modules/basic/part_info/partInfoList`, {
pageSize:10,
pageIndex:1,
})
.then((res) => {
console.log('res', res)
})
}
