ajax，jsonp，axios面试题

什么是前后端联调？

• 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：删除数据