首页 IT技术内容详情

umi + axios 请求数据(一)

2021-12-20 53616 小付

本文档主要是讲解一些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)
    })
  }



作者:搬砖笔记
链接:https://www.jianshu.com/p/a230e2b5b804
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


相关标签: # umi

 暂无评论,快来抢沙发吧~

发布评论