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

 更新时间:2023年10月14日 15:06:14   作者:郑建007  
Post是向服务器提交数据的一种请求,get是向服务器发索取数据的一种请求,post在真正接受数据之前会先将请求头发送给服务器进行确认,然后才真正发送数据,本文给大家介绍vue中axios的get请求和post请求的传参方式、拦截器示例代码,感兴趣的朋友一起看看吧

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

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

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

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

        4.post比get慢

        5.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
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>   // 通过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+vite项目配置ESlint、pritter插件过程

    vue3+vite项目配置ESlint、pritter插件过程

    这篇文章主要介绍了vue3+vite项目配置ESlint、pritter插件过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • Vue中子组件不能修改父组件传来的Prop值的原因分析

    Vue中子组件不能修改父组件传来的Prop值的原因分析

    在Vue中,父子组件之间通过Prop和Event实现了数据的双向绑定,但是,Vue设计者为什么不允许子组件修改父组件传递的Prop呢,本文就来带大家探究为什么子组件不能修改Prop,需要的朋友可以参考下
    2023-06-06
  • vue项目打包清除console.log的四种方法总结

    vue项目打包清除console.log的四种方法总结

    大家在项目开发的时候,需要看看一些后端接口返回的结果,会多次使用console.log项目开发完成打包的时候,发现控制台一堆的console.log,非常头疼,下面这篇文章主要给大家介绍了关于vue项目打包清除console.log的四种方法,需要的朋友可以参考下
    2023-04-04
  • vue之bus总线的简单使用解读

    vue之bus总线的简单使用解读

    这篇文章主要介绍了vue之bus总线的简单使用解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • Vue 中使用 WebWorker的示例代码

    Vue 中使用 WebWorker的示例代码

    这篇文章主要介绍了Vue中使用WebWorker的示例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08
  • vue3实现数字滚动特效实例详解

    vue3实现数字滚动特效实例详解

    这篇文章主要为大家介绍了vue3实现数字滚动特效实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • Vue3中操作dom的四种方式总结(建议收藏!)

    Vue3中操作dom的四种方式总结(建议收藏!)

    VUE是通过传递一些配置给Vue对象和页面中引用插值表达式来操作DOM的,下面这篇文章主要给大家介绍了关于Vue3中操作dom的四种方式总结,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • vue3+vite使用svg图片方式

    vue3+vite使用svg图片方式

    这篇文章主要介绍了vue3+vite使用svg图片方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2026-03-03
  • 详解Vue2中组件间通信的解决全方案

    详解Vue2中组件间通信的解决全方案

    Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单。下面这篇文章主要给大家介绍了关于Vue2中组件间通信的解决全方案,文中通过示例代码介绍的非常详细,需要的朋友们下面来一起看看吧。
    2017-07-07
  • Vue中代码编辑器与实时预览功能

    Vue中代码编辑器与实时预览功能

    CodeMirror提供了强大的代码编辑功能,而Vue.js使得组件的创建和数据绑定变得非常简单,当用户编辑代码时,实时预览会根据代码的变化进行更新,从而为用户提供了一个交互式的编程环境,这篇文章主要介绍了Vue中如何进行代码编辑器与实时预览,需要的朋友可以参考下
    2023-10-10

最新评论