欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中axios的get請求和post請求的傳參方式、攔截器示例代碼

 更新時間：2023年10月14日 15:06:14   作者：鄭建007  
Post是向服務器提交數(shù)據(jù)的一種請求,get是向服務器發(fā)索取數(shù)據(jù)的一種請求,post在真正接受數(shù)據(jù)之前會先將請求頭發(fā)送給服務器進行確認,然后才真正發(fā)送數(shù)據(jù),本文給大家介紹vue中axios的get請求和post請求的傳參方式、攔截器示例代碼,感興趣的朋友一起看看吧

一、GET 和 POST 傳參方式的優(yōu)缺點

        1.post更安全（不會作為url的一部分，不會被緩存，保存在服務器日志，以及瀏覽器瀏覽記錄中）

        2.post發(fā)送的數(shù)據(jù)量更大（get有url長度限制）

        3.post能發(fā)送更多的數(shù)據(jù)類型（get只能發(fā)送ASCII字符）

        4.post比get慢

        5.Post是向服務器提交數(shù)據(jù)的一種請求，get是向服務器發(fā)索取數(shù)據(jù)的一種請求。

        5.Post是向服務器提交數(shù)據(jù)的一種請求，get是向服務器發(fā)索取數(shù)據(jù)的一種請求。

        7.post請求包含更多的請求頭

        8.post在真正接受數(shù)據(jù)之前會先將請求頭發(fā)送給服務器進行確認，然后才真正發(fā)送數(shù)據(jù)

二、GET 和 POST 傳參方式的請求過程

post請求的過程：

1.瀏覽器請求tcp連接（第一次握手）
2.服務器答應進行tcp連接（第二次握手）
3.瀏覽器確認，并發(fā)送post請求頭（第三次握手，這個報文比較小，所以http會在此時進 行第一次數(shù)據(jù)發(fā)送）
4.服務器返回100 continue響應
5.瀏覽器開始發(fā)送數(shù)據(jù)
6.服務器返回200 ok響應

get請求的過程

1.瀏覽器請求tcp連接（第一次握手）
2.服務器答應進行tcp連接（第二次握手）
3.瀏覽器確認，并發(fā)送get請求頭和數(shù)據(jù)（第三次握手，這個報文比較小，所以http會在此時進行第一次數(shù)據(jù)發(fā)送）
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

 第一種參(參數(shù)在url上)

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

第二種傳參(通過param選項傳遞參數(shù))

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
})
 
//添加請求攔截器   請求接口統(tǒng)一添加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, // 當跨域請求時發(fā)送cookie
    timeout: 15000 // 請求超時
});
 
//添加請求攔截器   請求接口統(tǒng)一添加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 { //接口正常，返回數(shù)據(jù)
            return response;
        }
    },
    error => {
        if (error.message) {
				// this.$massage.error('服務器開小差了，請稍后再試!')   
				//錯誤響應
				alert('服務器開小差了，請稍后再試!')   
        }
        return Promise.reject(error);
    }
);
//暴露出封裝過的服務
export default service;

到此這篇關于vue中axios的get請求和post請求的傳參方式、攔截器的文章就介紹到這了,更多相關axios get請求和post請求傳參內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論