react+ts+axios进行数据请求

1. 安装 axios

• axios中文文档：http://www.axios-js.com/zh-cn/docs/

• install

  yarn add axios
  

2. 在官方axios的基础上进行二次封装

• 在 src 目录下创建 api 文件夹，用来存放对应接口的内容

• 在 src/api 下新增 index.tsx 文件，用来管理 接口

• 在 src/api 下新增 ajax.tsx 文件， 用来做ajax请求的统一请求拦截， 响应拦截，响应统一处理等工作

  // ajax.tsx 文件
  import axios form 'axios'
  
  // 可以在这里做一下请求拦截，设置公共请求头等
  
  export default function ajax(url:string, data:IParams = {}, type:string = 'POST') {
      
      // 判断 url 地址， 在多个后台地址时候使用， 可以在这里拦截使用不同的请求头，传入不同token等操作
      
      return new Promise((resolve, reject) => {
          let promise:any // 返回一个 promise 对象
          if (type === 'GET') {
              promise = axios.get(url, { params : data })
              
              // 多个后台地址时候，传入不同的token值
              promise = axios.get(url, { params : data, headers: {access_totken: sessionStorage.getItem('token_other')} })
          } else if (type === 'POST') {
              promise = axios.post(url, data)
              
              // 多个后台地址时候，传入不同的token值
              promise = axios.get(url, data, headers: {access_totken: sessionStorage.getItem('token_other')})
          }
          // 统一处理 response
          promise.then((response:any) => {
             (response && response.data) ? resolve(response.data) : reject(response)
          }).catch((error:any) => {
            console.log(error)
          })
      })
  }
  

  // index.tsx 文件
  import ajax from './ajax'
  /*
  * ajax 从 ajax.js 引入 需要
  * 第一个 参数 是 url 必填
  * 第二个 参数 是 params对象 默认 {} 非必填
  * 第三个 参数 是 GET、POST 请求方式， 默认 POST， 非必填
  */
  // 后台地址
  const BASE_URL:string = `http:xxxx/api`
  const BASE_URL_OTHER:string = `http:xxx2.api` // 多个后台地址
  
  // 登陆接口
  export const ReqLogin = (params:IParams) => ajax(`${BASE_URL}login`, params, 'POST') // POST 是默认值，可以不写
  
  export const ReqOther = (params:IParams) => ajax(`${BASE_URL_OTHER}login`, params)
  

3. 使用 axios 请求数据

// login 登陆组件中调用 登陆接口
// 引入接口
import { ReqLogin } from '@api'
// 触发请求事件
const loginSubmit = async () => {
    const params = {name: 'admin', password: '123456'}
    const res = await ReqLogin(params)
    // res 即为 ajax 请求返回的 数据
}