axios常见传参方式_axios中get/post/put/patch请求

时间: 2018-09-11阅读: 19555标签: axios

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


1:get请求

一般发送请求是这么写

axios.get('/user?id=12345&name=user')
.then(function (res) {
    console.log(res);
}).catch(function (err) {
    console.log(err);
});


但是为了方便全局统一调用封装的axios

axios.get('/user', {  //params参数必写 , 如果没有参数传{}也可以
    params: { 
       id: 12345,
       name: user
    }
})
.then(function (res) {
    console.log(res);
})
.catch(function (err) {
    console.log(err);
});



2.post/put/patch请求 

(1) 传参格式为 formData 

(全局请求头:'Content-Type'= 'application/x-www-form-urlencoded')

(request的Header:'Content-Type'= 'multipart/form-data')

var formData=new FormData();
formData.append('user',123456);
formData.append('pass',12345678);
  
axios.post("/notice",formData)
     .then((res) => {return res})
     .catch((err) => {return err})



(2) 传参格式为 query 形式  

(全局请求头:'Content-Type'= 'application/x-www-form-urlencoded')

(request的Header:'Content-Type'= 'application/x-www-form-urlencoded')

第一种情况:使用$qs.stringify

import Qs from 'qs'   //引入方式
vue.prototype.$qs = Qs  //全局加载
this.$qs.stringify(data);  //使用方式
this.$qs.parse(data);  //使用方式
  
var readyData=this.$qs.stringify({
    id:1234,
    name:user
});
axios.post("/notice",readyData)
     .then((res) => {return res})
     .catch((err) => {return err})

更多qs功能参考:https://www.npmjs.com/package/qs


第二种情况:使用URLSearchParams

浏览器中,您可以使用URLSearchParams API,如下所示:

var params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

注意:所有浏览器都不支持URLSearchParams,但是有一个polyfill可用(确保polyfill全局环境)。


(3) 传参格式为 raw (jsON格式) 

  第一种情况: axios将JavaScript对象序列化为JSON

(全局请求头:'Content-Type'= 'application/x-www-form-urlencoded')

(request的Header:'Content-Type'= 'application/json;charset=UTF-8')

var readyData={
    id:1234,
    name:user
};
axios.post("/notice",readyData)
     .then((res) => {return res})
     .catch((err) => {return err})


  第二种情况:

(全局请求头:‘Content-Type'= 'application/json;charset=UTF-8')

(request的Header:‘Content-Type'= 'application/json;charset=UTF-8')

var readyData=JSON.stringify({
    id:1234,
    name:user
});
axios.post("/notice",readyData)
     .then((res) => {return res})
     .catch((err) => {return err})



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/1068

vue中axios的使用与封装

分享下我自己的axios封装,axios是个很好用的插件,都是一些params对象,所以很方便做一些统一处理。当然首先是npm安装axios 很简单。在src下新建文件夹 service / index.js,接着上代码

axios基于常见业务场景的二次封装

axios的二次封装,功能实现:1.兼容ie浏览器避免缓存2.减少或更新重复请求3.接口域名使用环境变量4.全局loading状态5.可关闭的全局错误提醒6.可开启携带全局分页参数

自己动手实现一个axios

作为一名前端er,对于数据请求的第三方工具axios,一定不会陌生,如果还是有没有用过,或者不了解的小伙伴,这里给你们准备了贴心的中文文档 ,聪明的你们一看就会~

axios处理Http请求的基本使用方法总汇

axios的功能特性:在浏览器中发送 XMLHttpRequests 请求,在 node.js 中发送 http请求,支持 Promise API,拦截请求和响应,转换请求和响应数据,自动转换 JSON 数据,客户端支持保护安全免受 XSRF 攻击

axios前端加密通讯的处理

先谈谈项目前景,因为安全的要求,所以我们要把前端所有的请求都得加密与服务端应用进行通讯,当然服务端的响应也是加密的,前端也需要对应得解密。

网络模块axios的简单应用

例子中使用到的url仅作为示例,不一定有效,想要复现代码需要使用能够提供数据的有效服务器接口url,axios:ajax i/o system;是用于在Vue.js中发送网络请求的第三方框架;可通过许多方式发送网络请求比如:

vue封装axios和利用拦截器监控返回的token的变化和报错信息

步骤一:安装axios进入vue-cli;步骤二:新建一个httpConfig文件下,创建两个js文件,一个作为axios拦截器用,一个封装接口;步骤三:在serviceAPI.config.js中封装所有的API接口

vue axios 拦截器

项目中需要验证登录用户身份是否过期,是否有权限进行操作,所以需要根据后台返回不同的状态码进行判断。axios的拦截器分为请求拦截器和响应拦截器两种。我一般把拦截器写在main.js里。

axios的使用

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。支持从浏览器中创建XML请求,支持 node.js中发出http请求,支持拦截请求和响应,支持转换请求和响应数据,支持自动转换JSON数据,客户端支持防御 XSRF。

axios表单格式请求后端报错Bad Request

开始没有使用Qs库,能获取到列表数据,但是添加项目等需要传请求参数的情况下,使用表单的传参方式就不能成功请求,就报错。报错如下:

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!