//使用npm安裝
npm install axios; 
//使用yarn安裝
yarn add axios

//在index.js中引入axios
import axios from 'axios';
//引入qs模塊，用來序列化post類型的數(shù)據(jù)
import QS from 'qs';
//antd的message提示組件，大家可根據(jù)自己的ui組件更改。
import { message } from 'antd'

//保存環(huán)境變量
const isPrd = process.env.NODE_ENV == 'production';

//區(qū)分開發(fā)環(huán)境還是生產(chǎn)環(huán)境基礎URL
export const basciUrl = isPrd ? 'https://www.production.com' : 'http://www.development.com'

//設置axios基礎路徑
const service = axios.create({
  baseURL: basicUrl
})
// 請求攔截器
service.interceptors.request.use(config => { 
  // 每次發(fā)送請求之前本地存儲中是否存在token，也可以通過Redux這里只演示通過本地拿到token
  // 如果存在，則統(tǒng)一在http請求的header都加上token，這樣后臺根據(jù)token判斷你的登錄情況
  // 即使本地存在token，也有可能token是過期的，所以在響應攔截器中要對返回狀態(tài)進行判斷 
  const token = window.localStorage.getItem('userToken') || window.sessionStorage.getItem('userToken');
  //在每次的請求中添加token
  config.data = Object.assign({}, config.data, {
    token: token,
  })
  //設置請求頭
  config.headers = {
    'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
  }
  config.data = QS.stringify(config.data)
  return config
}, error => { 
    return error;
})

// 響應攔截器
service.interceptors.response.use(response => {
  //根據(jù)返回不同的狀態(tài)碼做不同的事情
  // 這里一定要和后臺開發(fā)人員協(xié)商好統(tǒng)一的錯誤狀態(tài)碼
  if (response.code) {
    switch (response.code) {
      case 200:
        return response.data;
      case 401:
        //未登錄處理方法
        break;
      case 403:
        //token過期處理方法
        break;
      default:
        message.error(response.data.msg)
    }
  } else { 
    return response;
  }
})
//最后把封裝好的axios導出
export default service

//導入我們封裝好的axios 
import service from './index'

http://www.development.com/api/v1/articleEdit

export const apiArticleEdit = info => service.post('/api/v1/articleEdit', info);

import React, { Component } from 'react'
 import { apiArticleEdit } from './request/api'
export default class App extends Component {
  componentDidMount() { 
    // 調(diào)用api接口，并且提供了兩個參數(shù)
    let params = { type: 2, author: '北孤清茶' }
    apiArticleEdit(params).then(res => { 
      // 獲取數(shù)據(jù)成功后的其他操作
      //.....
      console.log(res)
    })
  }
  render() {
    return (
      <div>
        
      </div>
    )
  }
}

//在index.js中引入axios
import axios from 'axios';
//引入qs模塊，用來序列化post類型的數(shù)據(jù)
import QS from 'qs';
//antd的message提示組件，大家可根據(jù)自己的ui組件更改。
import { message } from 'antd'

//保存環(huán)境變量
const isPrd = process.env.NODE_ENV == 'production';

//區(qū)分開發(fā)環(huán)境還是生產(chǎn)環(huán)境基礎URL
export const basciUrl = isPrd ? 'https://www.production.com' : 'http://www.development.com'

//設置axios基礎路徑
const service = axios.create({
  baseURL: basicUrl
})

// 請求攔截器
service.interceptors.request.use(config => { 
  // 每次發(fā)送請求之前本地存儲中是否存在token，也可以通過Redux這里只演示通過本地拿到token
  // 如果存在，則統(tǒng)一在http請求的header都加上token，這樣后臺根據(jù)token判斷你的登錄情況
  // 即使本地存在token，也有可能token是過期的，所以在響應攔截器中要對返回狀態(tài)進行判斷 
  const token = window.localStorage.getItem('userToken') || window.sessionStorage.getItem('userToken');
  //在每次的請求中添加token
  config.data = Object.assign({}, config.data, {
    token: token,
  })
  //設置請求頭
  config.headers = {
    'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
  }
  //序列化請求參數(shù)，不然post請求參數(shù)后臺接收不正常
  config.data = QS.stringify(config.data)
  return config
}, error => { 
    return error;
})

// 響應攔截器
service.interceptors.response.use(response => {
  //根據(jù)返回不同的狀態(tài)碼做不同的事情
  // 這里一定要和后臺開發(fā)人員協(xié)商好統(tǒng)一的錯誤狀態(tài)碼
  if (response.code) {
    switch (response.code) {
      case 200:
        return response.data;
      case 401:
        //未登錄處理方法
        break;
      case 403:
        //token過期處理方法
        break;
      default:
        message.error(response.data.msg)
    }
  } else { 
    return response;
  }
})
//最后把封裝好的axios導出
export default service