精华内容
下载资源
问答
  • 原生js请求接口写法
    千次阅读
    2021-04-06 08:36:11
    var xmlhttp;
    //创建xmlhttprequest对象
    function createXMLHttpRequest(){
      xmlhttp=new XMLHttpRequest();  //这里要判断IE的写法
    }
    function startRequest(url) {
      createXMLHttpRequest();
      xmlhttp.open("GET",url,true);  //true:异步,false:同步
      xmlhttp.onreadystatechange=handleStateChange;
      xmlhttp.send(null);
    }
    function handleStateChange() {
      if(xmlhttp.readyState==4 && xmlhttp.status==200){
          var txt=xmlhttp.responseText;
          if(txt !=null && txt !=""){
            console.log(txt);
          }
      }
    }
    startRequest("url地址。。。。")
    更多相关内容
  • vue如何封装请求接口方法

    千次阅读 2021-01-27 14:16:04
    封装请求接口的方法有很多种,这是我最近新学的一种方法,可以参考一下 如果大家有更方便的方法也可以分享出来借鉴一下哈 首先创建一个server.js文件 引入axios和qs //引入axios和qs插件 import axios from 'axios' ...

    封装请求接口的方法有很多种,这是我最近新学的一种方法,可以参考一下

    如果大家有更方便的方法也可以分享出来借鉴一下哈

    首先创建一个server.js文件
    引入axios和qs

    //引入axios和qs插件
    import axios from 'axios'
    import qs from 'qs'
    //创建一个类并导出
    export const Server= new class {
    	constructor() {
    	//请求接口路径
    	this.loginApi= '/api/user/getuserinfo'; //根据dapp 地址,返回对应的中心化用户信息
    	}
    	//post请求方法
    	//方法(参数){
    	//	return axios.请求类型(请求接口路径,  参数).then((res) => res.data)
    	//}
    	//data为json格式,qs.stringify(data)为fromData表单格式
    	login(data) {
    		return axios.post(this.loginApi,  qs.stringify(data)).then((res) => res.data)
    	}
    	//post请求方法
    	getuserinfo(params) {
    		return axios.get(this.getuserinfoApi,  params).then((res) => res.data)
    	}
    }
    

    在页面使用

    import { Server} from "@/server";
    export default {
      data() {
        return {
        form:{}
        };
      },
      methods: {
        Login(){
        	//Server.请求方法(参数对象).then(res=>{})
        	Server.login(this.form).then(res=>{
        		conlose.log(res)
        	})
        },
        getuserinfo(){
        	Server.getuserinfo(this.form).then(res=>{
        		conlose.log(res)
        	})
        }
      }
    

    创建interceptor.js对请求进行相应的拦截处理

    import Vue from 'vue'
    import axios from 'axios'
    import router from './router'
    import { Toast } from 'element-ui'
    // 创建 axios 实例
    const service = axios.create({
      baseURL: config.context, // api base_url
      timeout: 60000 // 请求超时时间
    })
    //请求前
    service.interceptors.request.use(
    	//发送请求时即进行拦截,session为null的情况下不发送请求
    	function (config) {
    		//设置请求头
    		// Vue.ss.get('token') 获取存储于session中的token
    		config.headers['Content-Token'] = Vue.ss.get('token') ? Vue.ss.get('token') : "";
    		return config;
    	},
    	function (error) {
    		return Promise.reject("请求出错");
    	}
    );
    /*拦截器,对于响应的拦截器*/
    service.interceptors.response.use(
    	function (response) {
    		let code = response.errno;
    		return response;
    		//登录状态token过期或者未登录
    		if (parseInt(code) === 401 || parseInt(code) === 202) { //session无效
    			Toast(response.data.msg);
    			//跳转到登录页面
    			setTimeout(() => {
    				router.push({
    					name: 'login'
    				})
    			}, 1000);
    			Promise.reject(response);
    		} else if (parseInt(code) === 201) {
    			Toast(response.data.msg);
    			router.push({
    				name: 'Login'
    			})
    			Promise.reject(response);
    		}
    	},
    	function (error) {
    		if (error.response) {
    			switch (error.response.status) { //404,网络错误,地址有问题。
    				case 404:
    					Toast("访问地址错误");
    					break;
    				case 401:
    					Toast("未登录或登录已失效");
    					setTimeout(() => {
    						router.push({
    							name: 'login'
    						})
    					}, 1000);
    					break;
    			}
    		} else {
    			let errorMsg = error.message;
    			if (error.message.indexOf("timeout") > -1) {
    				errorMsg = "请求超时";
    			}
    			return Promise.resolve({ //在报错的时候传回一个正常的promise对象,错误可以交到正常处理
    				data: {
    					code: 1,
    					msg: error.message,
    					extmsg: errorMsg
    				}
    			});
    		}
    	}
    );
    

    还有可能会出现的跨域问题
    创建vue.config.js配置

    module.exports = {
    	devServer: {
    		port: 8085, // 自定义端口号
    		// host: '192.168.101.18',
    		host: '0.0.0.0',
    		proxy: {
    			  '/api':{
    					target: '要代理的域名地址', // 
    					ws: true, // websockets
    					changeOrigin: true,  // needed for virtual hosted sites
    					pathRewrite: {
    						//   '^/api': ''
    					}
    			  }
    		}
      },
      publicPath: './',
      
      // 是一个函数,会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
      chainWebpack: config => {
        // 配置别名
        config.resolve.alias
          .set('@', resolve('src'))
          .set('assets', resolve('src/assets'))s
          .set('components', resolve('src/components'))
          .set('views', resolve('src/views'))
    
        config.optimization.minimizer('terser').tap((args) => {
          // 去除生产环境console
          args[0].terserOptions.compress.drop_console = true
          return args
        })
    
    
    展开全文
  • vue3.0请求接口的例子

    千次阅读 2020-12-16 14:21:00
    <script> import { getInTheaters } from "@/api/movie"; import { reactive, toRefs, onBeforeMount, onMounted, onBeforeUnmount, provide, } from "vue";...import { useRouter } from "vue...
    <script>
    // getInTheaters 为封装的接口请求
    import { getInTheaters } from "@/api/movie";
    import {
      reactive,
      toRefs,
      onBeforeMount,
      onMounted,
      onBeforeUnmount,
      provide,
    } from "vue";
    import { useRouter } from "vue-router";
    import { useStore } from 'vuex'
    export default {
      components: {},
      setup() {
        const state = reactive({
          inTheaters: [],
        });
    
        // 编程式导航
        const router = useRouter();
        const store = useStore();
    
        onBeforeMount(() => {
          store.commit("setShowBack", false);
        });
    
        onBeforeUnmount(() => {
          store.commit("setShowBack", true);
        });
    
        const getInTheatersData = async () => {
          const res = await getInTheaters(
            "/gateway?cityId=310100&pageNum=1&pageSize=10&type=1&k=3535827"
          );
          state.inTheaters = res.data.data.films;
    
          onMounted(() => {
            //执行请求
            getInTheatersData();
          });
    
           //页面跳转
          const goToList = (type) => {
            router.push(`/list/${type}`);
          };
    
          // 传递数据给子组件
          provide("title", "电影");
    
          return { ...toRefs(state), goToList };
        };
      },
    };
    </script>
    展开全文
  • 前端请求接口的几种方式总结

    万次阅读 多人点赞 2019-08-24 15:46:57
    作为一名前端工程师,请求后台接口获取数据是必然的,也是要求前端人员需要掌握的必备技能。但你一段时间只用一种请求方法,突然让你换成其他方式不一定能够立马实现的来,为此总结了一下前端请求API的方法,方便...

    作为一名前端工程师,请求后台接口获取数据是必然的,也是要求前端人员需要掌握的必备技能。但你一段时间只用一种请求方法,突然让你换成其他方式不一定能够立马实现的来,为此总结了一下前端请求API的方法,方便今后查阅。

    一、vue-resource

    优点:体积小、支持主流的浏览器、支持Promise API和URI Templates、支持拦截器。

    安装

        $ yarn add vue-resource
        $ npm install vue-resource
    

    使用

    	/*引入Vue框架*/
    	import Vue from 'vue'
    	/*引入资源请求插件*/
    	import VueResource from 'vue-resource'
    	
    	/*使用VueResource插件*/
    	Vue.use(VueResource)
    

    常用的:

    this.$http.get().then()
    this.$http.post().then()
    this.$http.jsonp().then()
    

    学习链接:vue-resource

    二、axios

    vue2.0之后,就不再对vue-resource更新,而是推荐使用axios。基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 Node.js 中使用。

    优点:

    (1)在浏览器中发送 XMLHttpRequests 请求
    (2)在 node.js 中发送 http请求
    (3)支持 Promise API
    (4)拦截请求和响应
    (5)转换请求和响应数据
    (6)取消请求
    (7)自动转换为JSON数据
    (8)客户端支持保护安全免受 CSRF/XSRF 攻击

    直接单独使用:

    • get方式

      axios.get().then().catch()

    注:get方式传参数可以直接跟在url后面,也可以通过param对象传

    • post方式

      axios.post().then().catch()

    注:post方式传参必须用对象传

    实际开发时,会将axios封装,便于调用,并且使用拦截器控制请求状态

    封装axios请求:

    建api文件,在当前目录封装一个request.js文件,配置请求响应的拦截信息

    /**
     * @file axios请求封装
     */
    import axios from 'axios'
    import store from '../store/common'
    import router from '../router/common'
    import { Toast } from 'vant'
    
    const Axios = axios.create({})
    
    // 响应时间
    Axios.defaults.timeout = 10000
    // `withCredentails`选项表明了是否是跨域请求
    Axios.defaults.withCredentials = true
    // 设置默认请求头
    Axios.defaults.headers = {
      'X-Requested-With': 'XMLHttpRequest',
      'Content-Type': 'application/json; charset=UTF-8'
    }
    
    // 添加请求拦截器
    Axios.interceptors.request.use(
      config => {
        // loadingInstance = Loading.service({
        //   fullscreen: true
        // });
        // 获取token
        let token = store.getters.getToken
        if (token) {
          // 判断是否存在token,如果存在的话,则每个http header都加上token
          config.headers.Authorization = token
        }
        return config
      },
      error => {
        return Promise.reject(error)
      }
    )
    
    // 添加返回拦截器
    Axios.interceptors.response.use(
      response => {
        if (
          typeof response != 'undefined' &&
          (response.data.code == 1001 ||
            response.data.code == 0 ||
            response.data.code == 1000 ||
            response.data.code == 1100 ||
            response.data.code == 1200)
        ) {
          return response.data
        } else if (response.data.code == 20008) {
          // 交班后选机器号
          checkCode('当前无人当班,请选择机器号')
          router.replace('/center/machine')
          return response.data
        } else if (response.data.code == 1006) {
          // Token过期
          checkCode('登录过期,请重新登录')
          return response.data
        } else if (typeof response != 'undefined' && response.data.msg) {
          checkCode(response.data.msg)
          return response.data
        } else {
          checkCode('操作失败,请重试')
        }
        return ''
      },
      error => {
        if (error && error.response) {
          switch (error.response.status) {
            case 400:
              error.message = '请求错误'
              break
              ...
            default:
          }
        } else {
          error.message = '无法连接服务器'
        }
        // 对返回的错误处理
        return Promise.reject(error)
      }
    )
    
    // 请求失败错误信息提示
    function checkCode(message) {
      // 关闭loading
      // loadingInstance.close();
      // 弹出错误信息
      Toast(message)
    }
    export default Axios
    

    再建立一个index.js文件统一写请求接口,如下图:
    在这里插入图片描述
    全局暴露请求接口api,在vue.config.js文件中,配置chainwebpack,设置api的别名就可以全局使用api的接口了

    chainWebpack: config => {
        config.resolve.alias
          .set('api', path.resolve('./src/api/index.js'))
        config.plugin('provide').use(webpack.ProvidePlugin, [
          {
            api: 'api'
          }
        ])
      }
    

    接口请求:直接可以使用await api.getName(index.js下对应的接口名字)

    await api.pageSalesOrderProsDetailData(this.formDate).then(response => {
            if (response.data) {
              this.goodsList = this.goodsList.concat(response.data.content)
              this.totalPages = response.data.totalPages
              if (response.data.content.length < this.formDate.pageCount) {
                this.$store.commit('SET_ALL_LOADING', true)
              }
            }
            this.$store.commit('SET_SALES_RANK_MSG', this.goodsList)
          })
    

    vue中Axios的封装和API接口的管理

    三、ajax

    使用Jquery封装的ajax

    $.ajax({
        url:"http://www.microsoft.com", //请求的url地址
        dataType:"json", //返回格式为json
        async:true,//请求是否异步,默认为异步,这也是ajax重要特性
        data:{"id":"value"}, //参数值
        type:"GET", //请求方式
        beforeSend:function(){
            //请求前的处理
        },
        success:function(req){
            //请求成功时处理
        },
        complete:function(){
            //请求完成的处理
        },
        error:function(){
            //请求出错处理
        }
    });
    

    参数解释:

    $.ajax({
      url:"   ",                 //请求的地址
      type:"   ",              //请求方式两种“get”或者“post”,默认为“get”
      timeout:             //设置请求超时时间(毫秒。
      async:               //是否异步,默认设置为true,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,用户其他操作必须等待请求完成才可以执行。
      cache:             //默认为true(当dataType为script时,默认为false),设置为false将不会从浏览器缓存中加载请求信息。
      data:               //要求为Object或String类型的参数,发送到服务器的数据。get请求中将附加在url后
      dataType:      //预期服务器返回的数据类型。可用的类型如下:
    				xml:返回XML文档,可用JQuery处理。
    				html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。
    				json:返回JSON数据。
    				jsonp:JSONP格式。使用SONP形式调用函数
      beforeSend:   //发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义HTTP头
      complete:        //请求完成后调用的回调函数(请求成功或失败时均调用)。
      error:        //请求失败时被调用的函数。该函数有3个参数,即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)
    })
    

    四、WebSocket

    出现缘由:
    前端和后端的交互模式最常见的就是前端发数据请求,从后端拿到数据后展示到页面中。如果前端不做操作,后端不能主动向前端推送数据,这也是http协议的缺陷。因此,一种新的通信协议应运而生—websocket,他最大的特点就是服务端可以主动向客户端推送消息,客户端也可以主动向服务端发送消息,实现了真正的平等。

    使用场景:
    金融股票数据图、即时订单信息、天气、token是否过期等不请求就返回最新数据的场景使用。

    注:vue使用websocket需要注意以下几点:

    (1)首先需要判断浏览器是否支持websocket。
    在这里插入图片描述
    (2)在组件加载的时候连接websocket,在组件销毁的时候断开websocket
    (3)后端接口需要引入socket模块,否则不能实现连接

    举个例子:

    <template>
        <div>
            <button @click="send">发消息</button>
        </div>
    </template>
    <script>
    export default {
        data () {
            return {
                path:"test",
                socket:""
            }
        },
        mounted () {
            // 初始化
            this.init()
        },
        methods: {
            init: function () {
                if(typeof(WebSocket) === "undefined"){
                    alert("您的浏览器不支持socket")
                }else{
                    // 实例化socket
                    this.socket = new WebSocket(this.path)
                    // 监听socket连接
                    this.socket.onopen = this.open
                    // 监听socket错误信息
                    this.socket.onerror = this.error
                    // 监听socket消息
                    this.socket.onmessage = this.getMessage
                }
            },
            open: function () {
                console.log("socket连接成功")
            },
            error: function () {
                console.log("连接错误")
            },
            getMessage: function (msg) {
                console.log(msg.data)
            },
            send: function () {
                this.socket.send(params)
            },
            close: function () {
                console.log("socket已经关闭")
            }
        },
        destroyed () {
            // 销毁监听
            this.socket.onclose = this.close
        }
    }
    </script>
    
    展开全文
  • 下图是在浏览器中测试的 ajax 请求,那么此时我们需要在小程序中实现请求接口直接打开页面的功能。 预期目标 第一次尝试(失败) 我们知道的是,小程序中只能使用人家提供的 API ,不能自己写,所有的封装和变换都...
  • 前端新手请求接口失败问题

    千次阅读 2020-09-16 09:40:43
    前端新手请求接口失败问题: 问题描述: 原因分析: 后端的服务器没有开 解决方案: 开启对应接口的服务器
  • Vue请求接口封装

    千次阅读 2019-11-13 16:10:07
    vue接口封装 封装请求方法 import axios from 'axios' import { Message } from 'iview' //axios请求拦截 service.interceptors.response.use(response => { //统一处理返回信息 const res = response.data ...
  • 学习笔记——请求接口报400错误

    千次阅读 2021-09-27 13:24:18
    问题: 在请求接口时报了400错误, 400错误是请求时传过去的数据参数或者格式发生错误导致的.传递过去的是一种类似数组结构的数据.后台需要通过特殊的编码方式才能解析。 1.解决: 请求接口传值的时候,通过...
  • vue 中请求接口的两种方法

    万次阅读 2019-04-28 17:19:03
    vue 项目安装axios: cnpm install axios --save import axios from 'axios' 哪个文件需要用到就在哪个文件中引入 ... import qs from 'qs' qs 用来解决vue中post请求以 a=a&b=b 的格式 ma...
  • 在前端写接口请求的时候,遇到了跨域的问题。(在一个项目工程中通过接口请求另一个项目工程中的数据) 通过在线api测试https://getman.cn或者postman接口测试工具,都能正常请求到数据。但是在前端代码里就不行,...
  • java form-data请求方式 请求接口

    千次阅读 2020-11-24 15:57:47
    java form-data请求方式 请求接口 参数示例 MultiValueMap<String, String> map= new LinkedMultiValueMap<>(); map.add("apikey", kakao_api_push_api_key); map.add("userid",kakao_api_push_userId...
  • 如何解决超大数据请求接口导致响应失败一级目录二级目录三级目录 一级目录 二级目录 三级目录
  • RuoYi开发实战- PostMan请求接口

    千次阅读 2022-04-03 09:46:27
    默认的情况下接口是无法直接请求的,请求会报以下的错误: { "msg": "请求访问:/system/dhb/list,认证失败,无法访问系统资源", "code": 401 } 在一些场景下还是挺不方便的。那么如果想在postman中调试若依的...
  • postman或其他接口测试工具测试接口成功,前端本地请求接口返回405,本地代理的问题,加上:secure: true即可 前端反向代理问题 修改前: 修改后: 参考:https://www.jianshu.com/p/956a0064fe7d
  • 请求接口后加上后台重定向参数及跳转地址, 跳转地址例如https://www.csdn.net 我这里是退出登录接口 this.axios.post(`/user/logout?redirect_url=${window.location.origin}`) 假如不传的话,退出登录时就会...
  • 使用vue去请求接口发现问题来了:我请求只能请求一次,然后在按按钮去请求的时候发现502(这个是接口定义的)502就是传了空的值过来 这个是其中一种情况,还有别的情况 你看了 大可试试我这样的办法然后发现我前端代码...
  • vue 请求接口获取数据

    千次阅读 2020-12-01 16:52:02
    vue 请求接口获取数据 1.链接:https://www.cnblogs.com/kymming/p/6484626.html <!doctype html> <html> <head> <meta charset="UTF-8"> <title>获取图片列表</title> <...
  • js通过请求接口下载文件

    千次阅读 2020-07-16 18:24:24
    在开发项目中,我们经常会碰到,后端给出的接口,前端需要在触发那一刻请求接口,直接下载文件。下面直接列出下载文件流的代码 let token=local.get("token",null); // 通过自己项目的方式,拿到token let init = { ...
  • 解决办法:把你的前端项目启动,随便找一个接口,让后从Headers中找到Blade-Auth: 然后在postman中的Headers中把Blade-Auth添加进去,把后面的内容也拷进去。 问题解决了!可以访问了。
  • 【Vue】如何配置代理请求接口

    千次阅读 2019-11-28 22:50:30
    在实际项目中往往不想直接暴露后台的真实接口,我们可以通过配置代理接口进行伪装请求。 打开项目中/config/index.js文件 找到module.exports 配置 在dev模块中进行如下配置: // Proxy proxyTable: { ...
  • Java通过HttpClient实现请求接口发送文件
  • js循环请求接口

    千次阅读 2019-03-07 17:37:20
    setInterval和settimeout window.onload=function(){ setInterval(publicBusi,1000*60*1);//这里的1000表示1秒有1000毫秒,1分钟有60秒,7表示总共1分钟 } var number= $("#value"...function publicBusi(){...
  • React项目中请求接口的封装

    万次阅读 2018-12-10 15:18:06
    这个文件的作用主要是在开发环境和生产环境下调用不同的接口请求地址,生产环境下此文件的作用是动态 的获取浏览器中的地址进行拼装,便可以动态的获取地址,不需要写死 //获取当前的URL中的地址,同时携带端口号,...
  • java后台请求接口超时的处理

    千次阅读 2019-10-16 16:45:06
    } 代码解读: 一、callable是函数式接口,可以用lambda表达式简化书写: 二、future.cancle(); future.cancel(true);参数可以为false和true,参数为true则会强制interrupt中断正在执行的任务。 控制台打印任务中断...
  • 请求接口无权限

    千次阅读 2019-10-09 05:55:09
    很简单 接口是post,自己请求却用get就会报接口无权限的错误 转载于:https://www.cnblogs.com/wangyuxue/p/11319670.html
  • React学习12----请求接口数据

    千次阅读 2019-02-25 09:43:48
    react获取服务器APi接口的数据: ...我们使用 axios 插件,来请求接口数据 使用如下: 查看文档: axios https://www.npmjs.com/package/axios 1、安装axios模块npm install axios --save / npm in...
  • 请求方式使用的是axios,在main.js中添加baseURL 在下面配置中加上axios.defaults.baseURL = 'http://xxxx:18081';即可 Vue.use(VueAxios, axios) axios.defaults.baseURL = 'http://localhost:18081'; 再次...
  • java http请求接口返回值乱码

    万次阅读 2019-04-14 15:08:07
    //请求方式 conn.setRequestMethod(type); //设置是否从httpUrlConnection读入,默认情况下是true; httpUrlConnection.setDoInput(true); conn.setDoOutput(true); //allowUserInteraction 如果为 true,...
  • 用苹果cmsv10做视频网站时候出现这个现象,其实解决方法挺简单的,以下方法是演示通过宝塔操作。...声明:除特殊声明外本站文档均由作者原创,转载请注明出处,原文地址:苹果cms请求接口上传异常解决方法...
  • 比如这个接口,请求这个接口时, ajax post方式请求接口,只有options请求,没有post请求。 但是直接在浏览器中打开这个接口,可以正常返回数据。 怎么破?

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,595,564
精华内容 638,225
关键字:

请求接口