本文档主要是讲解一些
axios的基础配置，实际umi项目中一般会采用dva/fetch去请求数据。如果是想建立简单的数据请求可以采用这篇文档去配置；实际的项目中如果，如果项目的业务较复杂，想在umi项目中引入axios发起数据请求。可以参考后续文档（二）持续更新中......
引入 安装 axios
yarn add axios
编写axios文件
在项目src文件下，新建文件夹apiConfig，新增文件request.js, 编写axios请求数据时，需要对URL、及返回结果的处理：
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, // 如果请求话费了超过 `timeout` 的时间，请求将被中断
proxy: { // 'proxy' 定义代理服务器的主机名称和端口
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 // 下节详述
}, function (error) {
return Promise.reject(error);
});
export default axios;
相应结构
某个请求的响应包含以下信息:
{
// `data` 由服务器提供的响应
data: {},
// `status` 来自服务器响应的 HTTP 状态码
status: 200,
// `statusText` 来自服务器响应的 HTTP 状态信息
statusText: 'OK',
// `headers` 服务器响应的头
headers: {},
// `config` 是为请求提供的配置信息
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: {}
}
在项目中使用 index.js
import axiosfrom '@/utils/request';
import { stringify } from 'qs'; // 一个查询字符串解析和字符串化库，增加了一些安全性。
componentDidMount() {
let params={
pageSize:10,
pageIndex:1,
}
// 执行get请求：
axios.get(`ucc/modules/basic/part_info/partInfoList?${stringify(params)}`)
.then((res) => {
console.log('res', res)
})；
// 执行post请求：
axios.get(`ucc/modules/basic/part_info/partInfoList`, {
pageSize:10,
pageIndex:1,
})
.then((res) => {
console.log('res', res)
})
}
