精华内容
下载资源
问答
  • 文章目录前言一、fetch请求post方式导出1.代码参考2.常见格式3.参考链接总结 前言 导出文件一般为get请求,当携带参数过长会导致报错,故所以用post请求体请求导出文件 提示:以下是本篇文章正文内容,下面案例可...


    前言

    导出文件一般为get请求,当携带参数过长会导致报错,故所以用post请求体请求导出文件


    提示:以下是本篇文章正文内容,下面案例可供参考

    一、fetch请求post方式导出

    代码如下(示例):

    1.代码参考

    const token = "自己项目的token"
    try {
      //此处的fetch不是项目公共定义的方法,而是没封装前的fetch
      const response = await fetch('接口地址', {
        mode: 'cors',
        method: 'POST',
        headers: {
          "Content-Type": "application/json",
          "Accept": "application/json",
          "Authorization": token,
        },
        body: JSON.stringify("要传的参数"),
      })
      if (response.headers.get('content-type') !== 'application/json') {
        response.blob().then((blob) => {
          const a = window.document.createElement('a');
          // 获取 blob 本地文件连接 (blob 为纯二进制对象,不能够直接保存到磁盘上) //此处的type按照导出的格式来,这里是.xls
          const downUrl = window.URL.createObjectURL(new Blob([blob], { type: "application/vnd.ms-excel" }));
          //定义导出文件的命名
          let filename = "download.xls";
          //下面的if判断为获取后台配置的文件名称,如果获取不到则走自己定义的文件名称
          if (response.headers.get('content-disposition') && response.headers.get('content-disposition').indexOf("filename=") !== -1) {
            filename = response.headers.get('content-disposition').split('filename=')[1];
            a.href = downUrl;
            a.download = `${decodeURI(filename.split('"')[1])}` || "download.xls";
            a.click();
            window.URL.revokeObjectURL(downUrl);
          } else {
            a.href = downUrl;
            a.download = "数据导出.xls";
            a.click();
            window.URL.revokeObjectURL(downUrl);
          }
        }).catch(error => {
          message.error(error);
        });
      } else {
        let res = await response.json();
        message.error(res.msg);
      }
    } catch (err) {
      console.log(err)
      message.error('下载超时');
    }
    

    2.常见格式

    代码如下(示例):

    文件后缀type
    .docapplication/msword
    .docxapplication/vnd.openxmlformats-officedocument.wordprocessingml.document
    .xlsapplication/vnd.ms-excel
    .xlsxapplication/vnd.openxmlformats-officedocument.spreadsheetml.sheet

    3.参考链接

    post请求实现前端文件导出


    总结

    再也不能说导出文件只能是get请求了,因为我们也会post,慢慢变强大。

    展开全文
  • 主要介绍了详解使用fetch发送post请求时的参数处理的相关资料,需要的朋友可以参考下
  • 一、说明原生js提供了两种数据请求方式fetch,ajax- ajax需要封装的, fetch不需要- ajax不太符合MV* 开发方式,fetch可以认为是js为了MV*方式做的量身打造- fetch也是Promise功能:用fetch请求动态数据1、get请求(1...

    一、说明

    原生js提供了两种数据请求方式fetch,ajax

    - ajax需要封装的, fetch不需要

    - ajax不太符合MV* 开发方式,fetch可以认为是js为了MV*方式做的量身打造

    - fetch也是Promise

    功能:用fetch请求动态数据

    1、get请求

    (1)不带参数

    1 // 通过fetch获取百度的错误提示页面

    2 fetch('https://www.baidu.com/search/error.html') // 返回一个Promise对象

    3 .then((res)=>{

    4 return res.text() // res.text()是一个Promise对象

    5 })

    6 .then((res)=>{

    7 console.log(res) // res是最终的结果

    8 })

    (2)带参数:

    get请求参数是连接在url上

    1 methods: {

    2 get () {

    3 fetch(`${ BASE_URL }/get.php?a=1&b=2`)//get请求参数是连接在url上

    4 .then( data => data.text() )

    5 .then( res => {

    6 this.num = res

    7 })

    8 .catch( err => console.log( err ))

    9 },

    method: 'GET'不写默认是get请求

    2、post请求

    (1)不带参数

    1 // 通过fetch获取百度的错误提示页面

    2 fetch('https://www.baidu.com/search/error.html', {

    3 method: 'POST' // 指定是POST请求

    4 })

    5 .then((res)=>{

    6 return res.text()

    7 })

    8 .then((res)=>{

    9 console.log(res)

    10 })

    (2)带参数

    post请求传递参数:

    body: new URLSearchParams([["a", 1],["b", 2]]).toString()

    注意:POST请求的参数,一定不能放在URL中,这样做的目的是防止信息泄露。

    1 post () {

    2 /*

    3 1. post请求参数如何携带

    4 */

    5 fetch(`${ BASE_URL }/post.php`,{

    6 method: 'POST',

    7 // body: JSON.stringify({

    8 // a: 1,

    9 // b: 2

    10 // })

    11 headers: new Headers({

    12 'Content-Type': 'application/x-www-form-urlencoded' // 指定提交方式为表单提交

    13 }),

    14 body: new URLSearchParams([["a", 1],["b", 2]]).toString()

    15 }).then( data => data.text() )

    16 .then( res => {

    17 this.sum = res

    18 })

    19 .catch( err => console.log( err ))

    20 },

    总结:

    fetch( url, config ).then().then().catch()

    1 getMovies () {

    2 /* 第一个then是为数据格式化,可以格式化的数据类型有: json text blob[ 二进制 ]

    3 第二个then才是得到的数据

    4 */

    5 // fetch( url, config ).then().then().catch()

    6

    7 fetch('./mock/movie.json')

    8 .then( data => data.json() )

    9 .then( res => {

    10 console.log("兵哥: getMovies -> res", res)

    11 this.movies = res.movieList

    12 })

    13 }

    得到json格式数据:

    1 // 通过fetch获取百度的错误提示页面

    2 fetch('https://www.baidu.com/rec?platform=wise&ms=1&rset=rcmd&word=123&qid=11327900426705455986&rq=123&from=844b&baiduid=A1D0B88941B30028C375C79CE5AC2E5E%3AFG%3D1&tn=&clientWidth=375&t=1506826017369&r=8255', { // 在URL中写上传递的参数

    3 method: 'GET',

    4 headers: new Headers({

    5 'Accept': 'application/json' // 通过头指定,获取的数据类型是JSON

    6 })

    7 })

    8 .then((res)=>{

    9 return res.json() // 返回一个Promise,可以解析成JSON

    10 })

    11 .then((res)=>{

    12 console.log(res) // 获取JSON数据

    13 })

    格式化数据:

    data.json()

    data.text()

    处理数据可以使用querystring

    1 const qs = require( 'querystring' )

    2 const str = 'a=1&b=2'

    3 const obj = { a: '1', b: '2' }

    4 console.log( qs.parse( str ))

    5 console.log( qs.stringify( obj ))

    强制带Cookie:

    1 // 通过fetch获取百度的错误提示页面

    2 fetch('https://www.baidu.com/search/error.html', {

    3 method: 'GET',

    4 credentials: 'include' // 强制加入凭据头

    5 })

    6 .then((res)=>{

    7 return res.text()

    8 })

    9 .then((res)=>{

    10 console.log(res)

    11 })

    二、fetch的封装

    1 /**

    2 * 将对象转成 a=1&b=2的形式

    3 * @param obj 对象

    4 */

    5 function obj2String(obj, arr = [], idx = 0) {

    6 for (let item in obj) {

    7 arr[idx++] = [item, obj[item]]

    8 }

    9 return new URLSearchParams(arr).toString()

    10 }

    11

    12 /**

    13 * 真正的请求

    14 * @param url 请求地址

    15 * @param options 请求参数

    16 * @param method 请求方式

    17 */

    18 function commonFetcdh(url, options, method = 'GET') {

    19 const searchStr = obj2String(options)

    20 let initObj = {}

    21 if (method === 'GET') { // 如果是GET请求,拼接url

    22 url += '?' + searchStr

    23 initObj = {

    24 method: method,

    25 credentials: 'include'

    26 }

    27 } else {

    28 initObj = {

    29 method: method,

    30 credentials: 'include',

    31 headers: new Headers({

    32 'Accept': 'application/json',

    33 'Content-Type': 'application/x-www-form-urlencoded'

    34 }),

    35 body: searchStr

    36 }

    37 }

    38 fetch(url, initObj).then((res) => {

    39 return res.json()

    40 }).then((res) => {

    41 return res

    42 })

    43 }

    44

    45 /**

    46 * GET请求

    47 * @param url 请求地址

    48 * @param options 请求参数

    49 */

    50 function GET(url, options) {

    51 return commonFetcdh(url, options, 'GET')

    52 }

    53

    54 /**

    55 * POST请求

    56 * @param url 请求地址

    57 * @param options 请求参数

    58 */

    59 function POST(url, options) {

    60 return commonFetcdh(url, options, 'POST')

    61 }

    62 GET('https://www.baidu.com/search/error.html', {a:1,b:2})

    63 POST('https://www.baidu.com/search/error.html', {a:1,b:2})

    展开全文
  • fetch请求get/post

    千次阅读 2020-02-21 18:40:20
    fetch的基本格式 fetch('http://jsonplaceholder.typicode.com/todos') .then(res =>{ }) .then(data=>{ }); 它只是一个 HTTP 响应,而不是真的JSON。为了获取JSON的内容,我们需要使用 json() 方法: ...

    fetch的基本格式

    fetch('http://jsonplaceholder.typicode.com/todos')
      .then(res =>{
      })
      .then(data=>{
      });
    

    它只是一个 HTTP 响应,而不是真的JSON。为了获取JSON的内容,我们需要使用 json() 方法:

     fetch("http://jsonplaceholder.typicode.com/todos")
                  .then(res => {
                      return res.json();
                  })
                  .then(todos => {
                      this.todos = todos;
                  })
    

    post上传JSON数据:

    var url = 'https://example.com/profile';
    var data = {username: 'example'};
    
    fetch(url, {
      method: 'POST', // or 'PUT'
      body: JSON.stringify(data), // data can be `string` or {object}!
      headers: new Headers({
        'Content-Type': 'application/json'
      })
    }).then(res => res.json())
    .catch(error => console.error('Error:', error))
    .then(response => console.log('Success:', response));
    
    fetch('http://jsonplaceholder.typicode.com/todos', {
                        method: 'post',
                        body: JSON.stringify(this.item),
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    }).then(res => {
                        return res.json()
                    })
                        .catch(err => {
                            console.log(err);
                        })
                        .then(item => {
                            this.todos.unshift(item);
                        })
                        .catch(err => {
                            console.log(err);
                        })
    

    在这里插入图片描述

    <body>
    <div id="app">
        <button @click="show">show</button>
        <br>
        <form @submit.prevent="submit">
            <input type="text" v-model="item.title">
            <input type="checkbox" v-model="item.completed">
            <input type="submit">
        </form>
        <ul ref="oul" v-for="(todo,index) in todos" v-show="todo.completed">
            <li>{{ todo.id }}</li>
            <li>{{ todo.title }}</li>
            <li>{{ todo.completed }}</li>
        </ul>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data() {
                return {
                    todos: [],
                    item: {title: '', completed: false}
                }
            },
            //mounted 代码写里面自动执行,省的调用方法了。
            mounted() {
                fetch("http://jsonplaceholder.typicode.com/todos")
                    .then(res => {
                        return res.json();//要让下面接受到请求到的数据,这就要return出去,这样下面的todos,即参数就是return出去的数据了,应该是这么事
                    })
                    .then(todos => {
                        this.todos = todos;
                    })
            },
            methods: {
                show() {
                    for (let i = 0; i < this.$refs.oul.length; i++) {
                        this.$refs.oul[i].style.cssText = "display: block";
                    }
                },
                submit() {
                    fetch('http://jsonplaceholder.typicode.com/todos', {
                        method: 'post',
                        body: JSON.stringify(this.item),
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    }).then(res => {
                        return res.json()
                    })
                        .catch(err => {
                            console.log(err);
                        })
                        .then(item => {
                            this.todos.unshift(item);
                        })
                        .catch(err => {
                            console.log(err);
                        })
                }
            }
        })
    </script>
    
    展开全文
  • fetch请求

    2019-07-25 20:11:53
    GET请求写法: fetch("url路径").then(function(res){ console.log("成功",res) }).catch(function(err){ ...POST请求写法: fetch("url路径",{ method:"POST", body:JSON.stringify({ ...

    GET请求写法:

    	fetch("url路径").then(function(res){
    		console.log("成功",res)
    	}).catch(function(err){
    		console.log("失败",err)
    	})
    

    POST请求写法:

        fetch("url路径",{
        	method:"POST",
        	body:JSON.stringify({
        		name:"xxx",
        		age:108
        	}),
        	headers:{
        		"Content-type":"application/json ; charset=UTF-8"
        	}
        }).then(res=>{
        	console.log("成功",res)
        }).catch(err=>{
        	console.log("失败",err)
        })
    

    总结:
    和ajax的XMLHttpRequest比起来简洁一些,而且基于Promise,返回的结果也是一个promise

    展开全文
  • Fetch请求

    2019-02-19 14:52:49
    Fetch请求概述对比Fetch详解兼容性options常见错误 概述 开发过程中向服务端发送请求常用的三种方式, ,,实现的。 方式 形式 XMLHttpRequest (XHR) 浏览器的原生API Fetch 浏览器的原生API AJAX...
  • 前后端接口对接时,发现总会有请求返回的数据和后端说的对不上,查看,option后get/post请求返回:在fetch 请求requestConfig cache设为false就好了。
  • fetch请求和ajax请求

    2020-01-04 20:27:31
    fetch请求和ajax请求 ajax 1.是XMLHTTPRequest的一个实例 2.只有当状态为200或者304时才会请求成功 3.格式零散,容易出现回调地狱的问题 fetch 1.fetch是基于promise实现的,也可以结合async/await 2.fetch...
  • Fetch API提供了一个 JavaScript 接口,用于访问和操纵 HTTP 管道的一些具体部分,例如请求和响应。它还提供了一个全局fetch()方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。 这种功能以前是使用...
  • // method:'POST', // headers:{ // 'Content-Type':'application/x-www-form-urlencoded', // "Accept":'application/json,text/plain,*/*' // }, // body:qs.stringify( // { // user_id:'iwen@qq.com', ...
  • 在使用fetch请求由node构建 的服务的时候  get 请求能沟通过req,query请求过来参数但是post不行  所以需要引用body-parmr  或者使用formidable来进行post数据的解析 import formidable from 'formidable'...
  • React Fetch请求

    2019-06-19 23:14:54
    React Fetch请求 最近需要用,所以学习一下 1.fetch 基于promise的ajax请求https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API 2.React使用fetch 请求的方法一般放在生命周期的componentDidMount里...
  • react fetch请求

    千次阅读 2018-01-09 15:32:17
    import 'whatwg-fetch' import 'es6-promise' export function get(url) { // var result = fetch('http://www.mockhttp.cn'+url, { //打包apk时候使用 var result = fetch(''+url, { credentails:
  • React fetch请求方式

    千次阅读 2018-12-14 14:42:06
    fetch请求 fetch是一个使用了Promise,封装程度更高的网络请求API Promise 是异步编程的一种解决方案 Promise 对象代表一个异步操作,有三种状态:Pending(进行中) Resolved(已完成) Rejected(已失效) Promise 实例...
  • postData('https://solelynet.com/public/index.php/api/v1/UserProduct/GetList', {//url 地址和请求参数调用下面postData方法 "is_page":true, "currentPage":1, "pagesize":2, &...
  • 不仅仅是fetch,只要你满足以下几种情况,都会去发起一个 Preflighted requests,也就是options请求,参见上面链接。 It uses methods other than GET, HEAD or POST. Also, if POST is used to send request data...
  • 使用fetch 抓一下post请求 fetch("http://ordertools.jd.com/orderverTools/findPurePop", { "headers": { "accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,...
  • fetch post请求使用方法

    千次阅读 2019-04-19 20:44:04
    method: "POST", // credentials: 'include', headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }, mode: "cors", body: getkey(aaa) }) fetch(req) .then( (res) => { ...
  • fetch请求如下(前段UI框架是antd): 1.导航栏上点击Uers按钮,跳转至/users ```javascript <Link to="/users"><Icon type="bars" />Users ``` 2.路由跳转控制 ```javascript function RouterConfig({ ...
  • 《React-Native系列》31、 Fetch发送POST请求的坑与解决方案.pdf
  • fetch与ajax post请求

    千次阅读 2018-02-08 16:18:47
    //fetch POST请求fetch的原因是我们可以获取自己的json文件而不需要从服务器获取 export const getByFetch = (url, data,callback) =&gt; { //传入的数据转换为JSON对象 let form = JSON.parse(JSON....
  • 前端使用fetch请求,接口使用express开箱即用生成器构建当请求接口时报错 解决方案: 前端设置: //fetch设置 const respones = await fetch(LIST_URL, { mode: "cors", headers: { "Accept&...
  • fetch 请求封装

    2018-12-18 18:27:15
    * POST请求 * @param url 请求地址 * @param params 请求参数 * @param callback 回调函数 */ static postRequest = async (url, params) => { return await fetch(url, { method: "post", // 跨域 no-cors...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 34,287
精华内容 13,714
关键字:

fetch请求post