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

相关文章
|
JSON 前端开发 JavaScript
axios请求成功而$.ajax却不行排错
axios请求成功而$.ajax却不行排错
105 2
|
JSON 前端开发 JavaScript
Vue3 Ajax(axios)
Vue3 Ajax(axios)
|
存储 监控 安全
ajax面试题总结
ajax面试题总结
113 1
|
6月前
|
XML 前端开发 JavaScript
Ajax与Axios,以及Apifox的入门使用
本文由blue编写于2025年3月20日,主要介绍了Ajax、Axios以及Apifox的入门使用。文章首先讲解了Ajax的概念与作用,通过原生代码示例展示了如何实现异步数据交互;接着引入Axios,说明其对Ajax的封装简化了开发流程,并给出Axios实现相同功能的代码;最后详细讲述了Apifox的基本用法,包括创建接口、设置参数及生成Mock数据,为前后端开发提供了便利工具。
201 0
|
11月前
|
XML 前端开发 JavaScript
详解Ajax与axios的区别
详解Ajax与axios的区别
|
11月前
|
XML 前端开发 JavaScript
Ajax&Axios对比
【10月更文挑战第3天】
129 3
|
12月前
|
JSON 资源调度 JavaScript
Vue框架中Ajax请求的实现方式:使用axios库或fetch API
选择 `axios`还是 `fetch`取决于项目需求和个人偏好。`axios`提供了更丰富的API和更灵活的错误处理方式,适用于需要复杂请求配置的场景。而 `fetch`作为现代浏览器的原生API,使用起来更为简洁,但在旧浏览器兼容性和某些高级特性上可能略显不足。无论选择哪种方式,它们都能有效地在Vue应用中实现Ajax请求的功能。
270 4
|
XML 前端开发 JavaScript
Ajax、Fetch、Axios
Ajax、Fetch、Axios
130 25
|
JSON 前端开发 JavaScript
JavaWeb基础8——Filter,Listener,Ajax,Axios,JSON
Filter过滤器、Listener监听器、AJAX、 同步、异步优点和使用场景、Axios异步框架、JSON、js和JSON转换、案例,Axios + JSON 品牌列表查询和添加
JavaWeb基础8——Filter,Listener,Ajax,Axios,JSON
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
289 2

热门文章

最新文章

  • 1
    vue引入axios出现Module parse failed: Unexpected token (5:2)
    434
  • 2
    基于SqlSugar的开发框架循序渐进介绍(10)-- 利用axios组件的封装,实现对后端API数据的访问和基类的统一封装处理
    173
  • 3
    Vue中的axios深度探索:从基础安装到高级功能应用的全面指南
    261
  • 4
    JavaScript 使用axios库发送 post请求给后端, 给定base64格式的字符串数据和一些其他参数, 使用表单方式提交, 并使用onUploadProgress显示进度
    1063
  • 5
    若依修改,若依如何发送请求---王清江07,axios的请求在request.js文件中,若依发送GET请求,必须用param
    587
  • 6
    axios发送post请求,如何接受和返回一个axios的字段,解决bug的方法,困难的事情先从简单做起,先从发送一个axios的post请求做起,解决方法查别人的资料,查看F12看network就行
    126
  • 7
    文本,前后端数据交互,简单请求,如何去给data数据赋值,在mounted()里赋值,利用axios发送的请求,res就是数据集,就是后端的数据,this.users = res.data.data
    107
  • 8
    Request failed with status code 400,使用axios.post要发送参数,认真比对原项目,看看有没有忘记什么?
    355
  • 9
    vue3 在 watchEffect 里中断未完成的 axios 请求(只保留最后一次请求的方法---连续点击查询按钮的优化)
    253
  • 10
    前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用
    138