什么是前后端联调?
react中axios跨域的配置
const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function (app) { app.use( // https://home-api.pinduoduo.com/home/mediareports?page_number=1&page_size=20 '/home', createProxyMiddleware({ // 目标地址 target: 'https://home-api.pinduoduo.com/', // 修改原地址 changeOrigin: true, }) ); };
vue中axios跨域的配置
……
如何取消axios
source
cancel: ƒ cancel(message)
token: CancelToken {promise: Promise, reason: Cancel}
react-hooks小例子
let [source, setSource] = useState(axios.CancelToken.source())// 这里初始化source对象 useEffect(() => { axios.get('/home/mediareports', { cancelToken: source.token, // 这里声明的cancelToken其实相当于是一个标记, // 当我们要取消请求的时候,可以通过这个找到该请求 params: { page_number: 1, page_size: 20 } }).then(res => { // 你的逻辑 console.log(res.data.data) }).catch(err => { // 如果调用了cancel方法,那么这里的res就是cancel传入的信息 // 你的逻辑 throw(err) }) }, []) const CancelAxios = () => { source.cancel('这里你可以输出一些信息,可以在catch中拿到') }
如何取消ajax
var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.response); } else { console.log(xhr.status); } } xhr.open("GET", "https://api.github.com/"); xhr.send(); // 取消之前 {………………} xhr.abort(); //0
fatch(关注分离的设计思想)
缺点:兼容性不高,老版本浏览器不支持
特点:原生函数,不在使用xmlHttpRequest对象提交ajax请求
axios常用的5中请求方法
get:获取数据
post:提交数据(表单提交+文件上传)
put:更新数据(所有数据推送到后端)
patch:更新数据(只将修改的数据推送到后端)
delete:删除数据