axios的get请求和post请求的传参方式、拦截器

时间：2025-04-28 07:58:14

目录

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

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

post请求的过程：

get请求的过程

三、axios使用

1、axios的安装

2、axios的引入

3、get

4、post

四、拦截器

1、请求拦截器

2、响应拦截器

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

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

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

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

        比get慢

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

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

        请求包含更多的请求头

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

二、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="/axios/dist/"></script>   // 通过cdn直接调用

2、axios的引入

import axios from 'axios';

3、get

 第一种参(参数在url上)

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

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

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

4、post

('/api/axios', {
    uname: 'lisi',
    pwd: 123
}).then(ret => {
    ()
})

四、拦截器

1、请求拦截器

import axios from 'axios'

const service = ({
    baseURL: '基础路径',
    timeout: 15000
})

//添加请求拦截器   请求接口统一添加token
(
    config =>{
        // 成功的回调
    },
    error =>{
        // 失败的回调    
    }
)

export default service

2、响应拦截器

import axios from 'axios'

const service = ({
    baseURL: '基础路径',
    timeout: 15000
})

// 响应拦截器
(
    response => {
        // 成功回调
    },
    error => {
        // 失败回调
    }
)

export default service

3、案例

/**
 * 请求封装
 */
import axios from 'axios';
import configUrl from './';
import store from '../store';

const service = ({
    baseURL: ,
    // withCredentials: true, // 当跨域请求时发送cookie
    timeout: 15000 // 请求超时
});

//添加请求拦截器   请求接口统一添加token
(
    config =>{
         =  || '';  //请求添加token
        return config;
    },
    error =>{
        return (error);
    }
)

// 响应拦截器
(
    response => {
        //如果接口返回token，替换本地旧token
        if () {
            ("token", );
        }
        //自定义设置后台返回code对应的响应方式
        if ( == 203) { // 未登录或登录超时
            return (new Error('登录超时'));
        } else { //接口正常，返回数据
            return response;
        }
    },
    error => {
        if () {
				// this.$('服务器开小差了，请稍后再试!')   
				//错误响应
				alert('服务器开小差了，请稍后再试!')   
        }
        return (error);
    }
);
//暴露出封装过的服务
export default service;

相关文章