目录
一：什么是axios?
axios是一个基于Promise的HTTP库，可以用在浏览器和node.js中。
二：axios可以发起那些请求？
GET POST PUT DELETE PATCH
三： 在React项目中如何配置axios?
1：安装axios模块
npm i axios --save2: 在request.js中引入axios并配置
import aioxs from 'axios'
var request = axios.create({
// 后台接口的基准地址
baseURL:"http://127.0.0.1:8000/",
timeout:5000
})
// 添加请求拦截器
request.interceptors.request.use((config) => {
return config
}, function (error) {
//对相应错误做点什么
return Promise.reject(error)
}
)
//拦截器响应
request.interceptors.response.use((response) => {
return response
}, function (error) {
//对相应错误做点什么
return Promise.reject(error)
}
)
export default request3: 接受请收发起请求
import request from '../utils/request'
export function getNewsList(url, method, data) {
return request({
url: url,
method: method,
params: data
})
}
4:请求数据GET
//将封装好的axios请求引入
import getNewList from '../../api/NewsList'
export default class New extends Component {
constructor(props) {
super(props)
this.state = {
list: [],
yit: 0,
weit: 0,
huit: 0,
}
}
//加载页面时调用首次调用
componentDidMount() {
// 请求服务器
this.gengxin()
}
//请求全部数据get
async gengxin() {
var msg = await getNewsList('Contens/', 'get')
console.log(msg, 'msgmsg');
if (msg.data.code == 200) {
this.setState({ list: msg.data.list, weit: msg.data.weit, yit: msg.data.yit, huit: msg.data.huit })
console.log(this.state.list, 'llll');
}
}
render(){
}
}5:POST请求
可以每一个请求都写一个基准地址，请求方法，请求参数
over(id) {
axios.put('http://127.0.0.1:8000/Contens/', {
id: id,
status: 1
}).then((msg) => {
console.log(msg);
})
this.gengxin()
this.wd()
}但是我们封装了 ， 可以直接简写
例如：
async addOk() {
let msg = await getStuList("Student/", "post",
this.state.addStu
)
console.log(msg, 'tttttttt');
if (msg.data.code == 200) {
message.success('添加成功');
this.getStu()
}
this.setState({ tj: !this.state.tj })
}
6：PUT请求
async xg(){
let msg = await getNewList("Student/",'put',this.state.edtiStu)
console.log(msg, 'xxxxxxxxxxxx');
if (msg.data.code == 200) {
message.success('修改成功');
this.setState({ edit: !this.state.edit })
}
this.getStu()
}7:DELETE请求
//删除
async del(id) {
// console.log(id);
let msg = await getStuList('Student', 'delete', {
id: id
})
if (msg.data.code == 200) {
message.success('删除成功');
}
console.log(msg, 'sssssssss');
this.getStu()
}
