ajax,jsonp,axios面试题

简介: 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:删除数据

相关文章
|
3月前
|
JSON 前端开发 JavaScript
axios请求成功而$.ajax却不行排错
axios请求成功而$.ajax却不行排错
36 2
|
3月前
|
负载均衡 前端开发 搜索推荐
Axios 和 Ajax 的区别
Axios 和 Ajax 的区别
|
3月前
|
JSON 前端开发 JavaScript
Vue3 Ajax(axios)
Vue3 Ajax(axios)
|
22天前
|
存储 监控 安全
ajax面试题总结
ajax面试题总结
24 1
|
4天前
|
XML 前端开发 JavaScript
Ajax、Fetch、Axios
Ajax、Fetch、Axios
48 25
|
1月前
|
前端开发 JavaScript API
js【详解】ajax (含XMLHttpRequest、 同源策略、跨域、JSONP)
js【详解】ajax (含XMLHttpRequest、 同源策略、跨域、JSONP)
31 0
|
2月前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
55 2
|
3月前
|
XML 开发框架 .NET
C# .NET面试系列八:ADO.NET、XML、HTTP、AJAX、WebService
## 第二部分:ADO.NET、XML、HTTP、AJAX、WebService #### 1. .NET 和 C# 有什么区别? .NET(通用语言运行时): ```c# 定义:.NET 是一个软件开发框架,提供了一个通用的运行时环境,用于在不同的编程语言中执行代码。 作用:它为多语言支持提供了一个统一的平台,允许不同的语言共享类库和其他资源。.NET 包括 Common Language Runtime (CLR)、基础类库(BCL)和其他工具。 ``` C#(C Sharp): ```c# 定义: C# 是一种由微软设计的面向对象的编程语言,专门为.NET 平台开发而创建。 作
242 2
|
3月前
|
前端开发
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
|
3月前
|
XML 资源调度 前端开发
Ajax(axios)
Ajax(Asynchronous JavaScript and XML)是一种异步的Web开发技术,它通过在后台与服务器交换数据,实现了在不重新加载整个页面的情况下,更新部分网页内容的效果。Ajax的核心是XMLHttpRequest对象,它用于在浏览器和服务器之间发送HTTP请求和接收响应。
53 2