106.《React 数据请求的封装》

React 数据请求的封装

安装

npm install axios --save

http 封装文件

import axios from 'axios' 
// 请求拦截器
axios.interceptors.request.use(function (req) { 
    // 添加自定义请求头
    const userInfo =  sessionStorage.getItem('userinfo') || '{}'  
    // // 将登录凭证通过自定义请求头发送给数据接口 
    req.headers.authorization = userInfo.token
    return req
  }) 
// 添加响应拦截器
axios.interceptors.response.use( res => { 
    return res.data
  }
) 
axios.defaults.baseURL='http://localhost:3000'
export default axios

axios 的引入

在main.js文件中引入（在main.js引入即为全局引入）

// 数据请求
import axios from "./utils/http"; 
React.Component.prototype.$http = axios