vue中axios的get请求和post请求的传参方式、拦截器示例代码

您所在的位置：网站首页 › js数据请求方式 › vue中axios的get请求和post请求的传参方式、拦截器示例代码

vue中axios的get请求和post请求的传参方式、拦截器示例代码

2024-01-24 11:28| 来源: 网络整理| 查看: 265

目录一、GET 和 POST 传参方式的优缺点二、GET 和 POST 传参方式的请求过程三、axios使用1、axios的安装2、axios的引入3、get4、post四、拦截器1、请求拦截器2、响应拦截器3、案例

一、GET 和 POST 传参方式的优缺点

1.post更安全（不会作为url的一部分，不会被缓存，保存在服务器日志，以及浏览器浏览记录中）

2.post发送的数据量更大（get有url长度限制）

3.post能发送更多的数据类型（get只能发送ASCII字符）

4.post比get慢

5.Post是向服务器提交数据的一种请求，get是向服务器发索取数据的一种请求。

7.post请求包含更多的请求头

8.post在真正接受数据之前会先将请求头发送给服务器进行确认，然后才真正发送数据

二、GET 和 POST 传参方式的请求过程

post请求的过程：

1.浏览器请求tcp连接（第一次握手）2.服务器答应进行tcp连接（第二次握手）3.浏览器确认，并发送post请求头（第三次握手，这个报文比较小，所以http会在此时进行第一次数据发送）4.服务器返回100 continue响应5.浏览器开始发送数据6.服务器返回200 ok响应

get请求的过程

1.浏览器请求tcp连接（第一次握手）2.服务器答应进行tcp连接（第二次握手）3.浏览器确认，并发送get请求头和数据（第三次握手，这个报文比较小，所以http会在此时进行第一次数据发送）4.服务器返回200 ok响应。

三、axios使用

1、axios的安装 $ npm install axios // 使用npm $ bower install axios // 使用bower // 通过cdn直接调用

2、axios的引入 import axios from 'axios';

3、get

第一种参(参数在url上)

axios.get('/adate?id=123').then(res => { console.log(res); })

第二种传参(通过param选项传递参数)

axios.get('/adate?id=123',{ params: { id: 1 } }).then(res => { console.log(res); })

4、post axios.post('/api/axios', { uname: 'lisi', pwd: 123 }).then(ret => { console.log(ret.data) })

四、拦截器

1、请求拦截器 import axios from 'axios' const service = axios.create({ baseURL: '基础路径', timeout: 15000 }) //添加请求拦截器请求接口统一添加token service.interceptors.request.use( config =>{ // 成功的回调 }, error =>{ // 失败的回调 } ) export default service

2、响应拦截器 import axios from 'axios' const service = axios.create({ baseURL: '基础路径', timeout: 15000 }) // 响应拦截器 service.interceptors.response.use( response => { // 成功回调 }, error => { // 失败回调 } ) export default service

3、案例 /** * 请求封装 */ import axios from 'axios'; import configUrl from './url.js'; import store from '../store'; const service = axios.create({ baseURL: configUrl.baseURL, // withCredentials: true, // 当跨域请求时发送cookie timeout: 15000 // 请求超时 }); //添加请求拦截器请求接口统一添加token service.interceptors.request.use( config =>{ config.headers.token = store.getters.token || ''; //请求添加token return config; }, error =>{ return Promise.reject(error); } ) // 响应拦截器 service.interceptors.response.use( response => { //如果接口返回token，替换本地旧token if (response.headers.token) { sessionStorage.setItem("token", response.headers.token); } //自定义设置后台返回code对应的响应方式 if (response.data.code == 203) { // 未登录或登录超时 return Promise.reject(new Error('登录超时')); } else { //接口正常，返回数据 return response; } }, error => { if (error.message) { // this.$massage.error('服务器开小差了，请稍后再试!') //错误响应 alert('服务器开小差了，请稍后再试!') } return Promise.reject(error); } ); //暴露出封装过的服务 export default service;

到此这篇关于vue中axios的get请求和post请求的传参方式、拦截器的文章就介绍到这了,更多相关axios get请求和post请求传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:vue3实战-axios请求封装问题(get、post、put、delete)react中axios结合后端实现GET和POST请求方式Axios get post请求传递参数的实现代码vue如何封装Axios的get、post请求axios gin的GET和POST请求实现示例Vue axios全局拦截 get请求、post请求、配置请求的实例代码vue axios数据请求get、post方法及实例详解vue中axios处理http发送请求的示例（Post和get）

【本文地址】

vue中axios的get请求和post请求的传参方式、拦截器示例代码

vue中axios的get请求和post请求的传参方式、拦截器示例代码

今日新闻

推荐新闻