React項目中使用axios

https://blog.csdn.net/qq_41604498/article/details/105500474?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-11.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-11.nonecase

1.項目中安裝axios

npm isntall axios --save

 

2.server.js文件

​ 在index.js文件的同級目錄下新建server.js。

 

import axios from 'axios'
import qs from 'qs'
axios.defaults.baseURL = 'http://127.0.0.1:8888/xxxx/' //根據項目自己更改
//一些配置，發起請求和響應可以打印出來查看
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