vue网络请求方案原生网络请求和js网络请求库

一、 原生网络请求

1. XMLHttpRequest（w3c标准）   

// 没有promise时的产物

当时的万物皆回调，太麻烦

2. Fetch   

// html5提供的对象，基于promise 因为promise的存在，为了简化网络请求。

使用 Fetch - Web API 接口参考 | MDN

Fetch是新的ajax解决方案 Fetch会返回Promise对象。fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。

参数：

1、第一个参数是URL:

2、第二个设置请求的参数，是可选参数

3、返回使用了Promise 来处理结果/回调

fetch(url, options).then(res=>res.json()/text()).then(ret=>console.log(ret))

兼容性问题：

ie低版本不兼容Fetch怎么办？ =》 用第三方的Fetch库【fetch-polyfill】

使用fetch进行网络请求 let url1  url2  两个地址同时执行完毕后才进行相关操作 Promise.all

let url1 不管它是否执行成功我都要去处理 Promise.finally

 

 

封装 -- fetch网络请求

封装 -- fetch网络请求_tby_pr的博客-CSDN博客

二、 js网络请求库

axios

以promise类型返回 json 数据。

文档：使用说明 · Axios 中文说明 · 看云

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和node.js中。

能拦截请求和响应，自动转换JSON数据。axios也是vue作者推荐使用的网络请求库。

// axios.get/post/put/delete
axios.get(url,config) // config可以设置头信息
axios.post(url,data,config)
axios.put(url,data,config)
axios.delete(url,data,config)

或通过实例请求

 

通过实例请求，添加设置信息（常用）！

不通过实例做统一设置（不常用），因为是给所有人都设置

// 统一给axios设置
axios.defaults.timeout = 10000
axios.defaults.baseURL = 'http://localhost:3000'
axios.defaults.headers.a = 'admin'

post提交

// post提交
axios.post(url, { id: 1, name: 'aaaa' }).then(res => console.log(res.data))

 或者    axios直接用 # 标准写法（也不常用）

// axios直接用
axios({
  url,
  method:'get',
  data:{}
}).then(res => console.log(res))

拦截器   切面编程

（流水线）   (中间件)

1. 请求拦截器（能调用多次）

axios.interceptors.request.use(config => {
  // 统一设置请求域名地址
  config.baseURL = 'http://localhost:3000'
  // 超时时间
  config.timeout = 1000
  // 设置头信息
  config.headers.token = 'mytoken login'
  return config;
}, err => Promise.reject(err))

2. 响应拦截器（处理、过滤）

axios.interceptors.response.use(response => {
  return response.data
}, err => {
  // 可以在响应拦截器中统一去处理，请求异常
  alert('请求失败了，请重新请求一次')
  return Promise.reject(err)
});

以上就是网络请求方案原生网络请求和js网络请求库的详细内容，更多关于原生网络请求和js网络请求库的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 微信小程序网络请求的封装与填坑之路

    微信小程序网络请求的封装与填坑之路

    以前写过一篇关于微信小程序上拉加载,上拉刷新的文章,今天写的是关于小程序网络请求的封装. 在这里首先声明一个小程序文档的bug,导致大伙们在请求的时候,服务器收到不到参数的问题 示例代码: wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, header: { 'Content-Type': 'application/json' }, success: function(res) { console.lo

  • vue请求数据的三种方式

    请求数据的方式: vue-resource 官方提供的 vue的一个插件 axios fetch-jsonp 一,vue-resource请求数据 介绍:vue-resource请求数据方式是官方提供的一个插件 使用步骤: 1.安装vue-resource模块 cnpm install vue-resource --save 加--save是为了在package.json中引用,表示在生产环境中使用.因为我们在日常开发中,如果我们要打包代码给其他人或者上传到github,又或者要发布代码时,pa

  • vue项目中axios请求网络接口封装的示例代码

    每个项目网络请求接口封装都是很重要的一块,第一次做Vue项目,我们的封装方法如下: (1).新建一个js文件,取名api.js (2).引入 axios ,mint-UI ,如下图: import axios from 'axios' import {MessageBox, Toast} from 'mint-ui' axios.defaults.timeout = 50000//默认请求超时时间 axios.defaults.headers = '请求头' (2).封装get方法 export

  • vue发送ajax请求详解

    vue本身不支持发送AJAX请求,需要使用vue-resource(vue1.0版本).axios(vue2.0版本)等插件实现 axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行更新和维护 本文为大家介绍vue使用axios发送AJAX请求 首页安装并引入axios 1.npm install axios -S        #直接下载axios组件,下载完毕后axios.js就存放在node_modules

  • js跨域请求数据的3种常用的方法

    js跨域请求数据的3种常用的方法

    由于js同源策略的影响,当在某一域名下请求其他域名,或者同一域名,不同端口下的url时,就会变成不被允许的跨域请求. 那这个时候通常怎么解决呢,对此菜鸟光头我稍作了整理: 1.JavaScript    在原生js(没有jQuery和ajax支持)的情况下,通常客户端代码是这样的(我假设是在localhost:8080的端口下的http://localhost:8080/webs/i.mediapower.mobi/wutao/index.html页面的body标签下面加入以下代码): <scr

  • 浅谈Vue网络请求之interceptors实际应用

    项目背景 最近在项目开发中,遇到下面这样一个问题: 在进行铭感操作之前,每个请求需要携带token,但是token 有有效期,token 失效后需要换取新的token并继续请求. 需求分析 每个请求都需要携带 token ,所以我们可以使用 axios request 拦截器,在这里,我们给每个请求都加 token,这样就可以节省每个请求再一次次的复制粘贴代码. token 失效问题,当我们token 失效,我们服务端会返回一个特定的错误表示,比如 token invalid,但是我们不能在每个

  • vue网络请求方案原生网络请求和js网络请求库

    vue网络请求方案原生网络请求和js网络请求库

    一. 原生网络请求 1. XMLHttpRequest(w3c标准)    // 没有promise时的产物 当时的万物皆回调,太麻烦 2. Fetch    // html5提供的对象,基于promise 因为promise的存在,为了简化网络请求. 使用 Fetch - Web API 接口参考 | MDN Fetch是新的ajax解决方案 Fetch会返回Promise对象.fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象. 参数: 1.第一个参数

  • vue发送websocket请求和http post请求的实例代码

    先给大家介绍下vue发送websocket请求和http post请求 直接上代码: pdf.vue <script> import SockJS from 'sockjs-client'; import Stomp from 'stompjs'; import qs from "qs" export default { name: "pdf", data() { return { newsData: [], tagGuid_mx: "&quo

  • java中httpclient封装post请求和get的请求实例

    java中httpclient封装post请求和get的请求实例

    目录 httpclient封装post请求和get的请求 httpclient的post和get请求所用的代码 HttpClient发送Get.Post请求的实践 1. 配置及实例化HttpClient 2. 发送Get请求方法 3. 发送Post请求方法 4. 编写测试用例,进行Get .Post请求方法的测试 httpclient封装post请求和get的请求 在我们程序员生涯中,经常要复用代码,所以我们应该养成时常整理代码的好习惯,以下是我之前封装的 httpclient的post和get

  • 详解js跨域请求的两种方式，支持post请求

    JSONP实现跨域 常用的jquery实现跨域调用 $.ajax({ url: "http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/index.php", dataType: "jsonp", jsonp: "callback", context: document.body, success: function(data) { console.log(data); } }); 这个调用实际上

  • 原生js实现ajax请求和JSONP跨域请求操作示例

    本文实例讲述了原生js实现ajax请求和JSONP跨域请求.分享给大家供大家参考,具体如下: 直接上代码: const ajax = (params = {}) => { const nowJson = params.jsonp ? jsonp(params) : json(params); function jsonp(params){ //创建script标签并加入到页面中 var callbackName = params.jsonp; var head = document.getEle

  • Java 使用 HttpClient 发送 GET请求和 POST请求

    目录 概述 认证方式 基础认证Auth 用户名密码认证 Bearer Token 认证 配置超时 生成 RequestConfig 设置超时时间 概述 日常工作中,我们经常会有发送 HTTP 网络请求的需求,概括下我们常见的发送 HTTP 请求的需求内容: 可以发送基本的 GET/POST/PUT/DELETE 等请求: HTTP请求,可以附带认证,包括基本的 用户名/密码 认证,以及 Bearer Token 认证: 请求可以自定义 超时时间: HTTP请求可以带参数,也可以不带参数: HTT

  • 关于vue中的ajax请求和axios包问题

    在vue中,经常会用到数据请求,常用的有:vue-resourse.axios 今天我说的是axios的post请求 github源文件及文档地址:[https://github.com/axios/axios] + 首先,引入axios CDN: <script src="https://unpkg.com/axios/dist/axios.min.js"></script> npm: npm install axios 并在全局的js中引入:import a

  • python 请求服务器的实现代码(http请求和https请求)

    一.http请求 1.http请求方式:get和post get一般用于获取/查询资源信息,在浏览器中直接输入url+请求参数点击enter之后连接成功服务器就能获取到的内容,post请求一般用于更新资源,通过form表单或者json.xml等其他形式提交给服务器端,然后等待服务器端给返回一个结果的方式(这个返回结果一般就是被修改之后的是否成功的状态,或者是修改后的最新数据table等). http请求,不论是get还是post请求,都会包含几个部分,分别是header,cookie,get会有

  • 第一次在Vue中完整使用AJAX请求和axios.js的实战记录

    目录 零.AJAX 0.0 npm install express 0.1 express.js 0.2 GET-HTML 0.3 POST-HTML 一.导入模块 1.1方法一.下载axios.js,并放入vue工程plugins目录下 1.2方法二使用包管理器安装axios 1.3方法三直接引入CDN 二.实际应用 2.1以为和风天气API实践: 2.2数据接口如下: 2.3实现: 2.4完整Vue: 三.BUG修复 3.1 Can‘t resolve ‘axios‘ in ‘C:\vue\

  • JSP、Servlet中get请求和post请求的区别总结

    在学习JavaWeb最初的开始阶段,大家都会遇到HttpServlet中的doGet和doPost方法.前两天看<Head First Servlets & JSP>看到其中讲关于Servlet中get请求和post请求的区别,现总结如下: 1:请求数据的大小不同. 因为get请求的数据是要追加到URL中,而URL的数据量一般不能超过2K,所以用get请求的方法对数据的大小有限制.而post请求方法是把数据放在消息体中,所以理论上对数据量没有限制.(但是实际操作中也不能能太大) 2:安

随机推荐