一、使用axios
- 安装axios:
cnpm install axios --save
- 导入axios:
在哪里使用,在哪里导入
import axios from 'axios'
- 请求数据:
(1)请求本地json文件
方式1:
项目目录如下:
Axios.jsx:
import React from 'react'
import axios from 'axios'
class Axios extends React.Component {
//渲染完成的生命周期
componentDidMount(){
//异常处理 抓异常
try{
//react加载本地json文件,需放在public文件里 端口号为http://localhost:3000/ 页面加载出来为首页
axios.get("list.json").then((res)=>{
console.log(res);
});
}
catch(err){
throw err;
}
}
render() {
return (
<div></div>
);
}
}
export default Axios;
注:react加载本地json文件,需放在public文件里
方式2:在mock里挂载
项目目录如下:
mock.jsx:
import Mock from 'mockjs'
//加载本地数据
import listinfo from './list.json'
//使用Mock里的mock方法 拦截ajax请求
Mock.mock("/list","get",{
result:listinfo
});
export default Mock;
Axios.jsx:
import React from 'react';
import axios from 'axios';
class Axios extends React.Component{
componentDidMount(){
try{
axios.get("/list").then((res)=>{
console.log(res);
});
}catch(err){
throw err;
}
}
render(){
return (
<div></div>
)
}
}
export default Axios
(2)请求远程文件
Axios.jsx:
import React from 'react'
import axios from 'axios'
class Axios extends React.Component {
componentDidMount(){
let api="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20";
//里面是用this 注意this的指向
axios.get(api).then((res)=>{
console.log(res);
}).catch(function(res){
console.log(res);
});
}
render() {
return (
<div>请求服务器的数据</div>
);
}
}
export default Axios;
axios 插件用法:https://www.npmjs.com/package/axios
- axios中可进行传值,模拟后台数据进行修改
- params进行传参,mock中可以进行接收,路径上就能读出来
Axios.js:
import React from 'react';
import axios from 'axios';
class Axios extends React.Component {
componentDidMount(){
axios.post("/home",{
params:{
id:1
}
}).then((res)=>{
console.log(66);
});
}
render() {
return (
<div>请求服务器的数据</div>
);
}
}
export default Axios;
mock.js:
import Mock from 'mockjs';
var data=[];
//方法里可以接收请求传过来的参数,根据接收到的值可以将原数据的值(定义的data)进行修改
Mock.mock("/home",(res)=>{
console.log(JSON.parse(res.body).params.id);
});
export default Mock;
二、使用fetch-jsonp
- 安装fetch-jsonp:
cnpm install fetch-jsonp--save
- 导入fetch-jsonp:在哪里使用,在哪里导入
import fetchjsonp from 'fetch-jsonp'
- 请求数据:请求远程文件
例1:以简单的方式获取JSONP
Fetchjsonp .jsx:
import React from 'react'
import fetchjsonp from 'fetch-jsonp'
class Fetchjsonp extends React.Component {
componentDidMount(){
let api="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20";
fetchjsonp(api).then((res)=>{
//这里对数据进行操作 默认的
return res.json();
}).then((res)=>{
console.log(res);
}).catch((err)=>{
console.log(err);
});
}
render() {
return (
<div></div>
);
}
}
export default Fetchjsonp;
例2:设置JSONP回调参数名称,默认为’回调’
componentDidMount(){
let api="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20";
fetchjsonp(api,{
jsonpCallback:"custom_callback"
}).then((res)=>{
return res.json();
}).then((res)=>{
console.log(res);
}).catch((err)=>{
console.log(err);
});
}
例3:设置JSONP回调函数名称,默认为带json_前缀的随机数
componentDidMount(){
let api="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20";
fetchjsonp(api,{
jsonpCallbackFunction:" function_response"
}).then((res)=>{
//这里对数据进行操作 默认的
return res.json();
}).then((res)=>{
console.log(res);
}).catch((err)=>{
console.log(err);
});
}
fetch-jsonp 官网用法:https://www.npmjs.com/package/fetch-jsonp