React使用axios請求后端數據(簡單版)

直接在index.js同級目錄下創建server.js
別忘記安裝必備的插件 npm i axios qs --save

import axios from 'axios'
import qs from 'qs'
axios.defaults.baseURL = 'http://192.168.50.....'  //根據項目自己更改
axios.interceptors.request.use((config)=>{
    //如果項目中有將token綁定在請求數據的頭部，服務器可以有選擇的返回數據，只對有效的請求返回數據，這樣寫
    //這里是用戶登錄的時候，將token寫入了sessionStorage中了，之后進行其他的接口操作時，進行身份驗證。
    config.headers.Authorization = window.sessionStorage.getItem("token");
    console.log(config)
    return config;
  })
  //在response中
  axios.interceptors.response.use(config =>{
    console.log(config)
    return config;
  })

const http = {
    post:'',
    get:'',
    put:'',
    del:''
}

http.post = function (api, data){
    //let params = qs.stringify(data);
    return new Promise((resolve, reject)=>{
        axios.post(api,data).then(response=>{
            resolve(response)
        })
    })
}

http.get = function (api, data){
    //let params = qs.stringify(data);
    return new Promise((resolve, reject)=>{
        axios.get(api,data).then(response=>{
            resolve(response)
        })
    })
}

http.delete = function (api, data){
    return new Promise((resolve, reject)=>{
        axios.delete(api,data).then(response=>{
            resolve(response)
        })
    })
}

http.put = function (api, data){
    return new Promise((resolve, reject)=>{
        axios.put(api,data).then(response=>{
            resolve(response)
        })
    })
}

export default http

在類組件中直接導入使用即可

import http from '../../server.js'
 componentDidMount(){
        this.getMes()
    }
    getMes = async ()=>{
        const {data: res} = await http.get('open/home/get_nav_class')
        console.log('結果',res)
    }