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

Axios在vue項目中的封裝步驟

 更新時間:2022年10月08日 10:56:27   作者:Richeneen?.  
Axios?是一個基于?promise?的網(wǎng)絡請求庫,可以用于瀏覽器和?node.js,是一個第三方插件,第三方異步請求工具庫,這篇文章主要介紹了Axios在vue項目中的封裝方法,需要的朋友可以參考下

1. 什么是Axios?

Axios 是一個基于 promise 的網(wǎng)絡請求庫,可以用于瀏覽器和 node.js,是一個第三方插件,第三方異步請求工具庫

Axios的特點:

  • 可以運行在瀏覽器和node.js環(huán)境中
  • 基于promise,可以調(diào)用promiseAPI
  • 默認發(fā)送的是get請求,默認post請求發(fā)送的數(shù)據(jù)格式是JSON
  • 除了表單格式數(shù)據(jù),對請求數(shù)據(jù)和響應數(shù)據(jù)可以自動轉(zhuǎn)換JSON數(shù)據(jù)格式。
  • 可以對請求和響應做攔截

2. 回顧Ajax

Ajax的特點:

  • 異步的JavaScript和XML
  • 可以在瀏覽器中運行,但是不可以在node.js環(huán)境下運行
  • 請求數(shù)據(jù)和響應數(shù)據(jù)需要手動轉(zhuǎn)換格式
  • 請求頭也需要手動設置

Ajax創(chuàng)建步驟:

    // 1.創(chuàng)建XMLHttpRequest實例
    let xhr = new XMLHttpRequest()
    // 2.打開一個連接
    xhr.open('請求方式get/post','請求地址')
    // 3.發(fā)送請求
    // 必要時還需設置請求頭格式:JSON/application/x-www-form-urlencoded
    xhr.setRequestHeader()
    // 必要時還需轉(zhuǎn)換請求數(shù)據(jù)格式:JSON.stringfy(參數(shù))/Qs.stringfy(參數(shù))
    xhr.send(請求參數(shù))
    // 4.接收響應
    xhr.onreadystatechange=function(){
      // 判斷:請求是發(fā)送完成和請求是否發(fā)送成功
      if(xhr.readyState===4 && xhr.status===200){
        // 接收響應:必要時還要轉(zhuǎn)換響應數(shù)據(jù)的格式 JSON.parse(xhr.response)
        console.log(xhr.response);
      }
    }

3. 回顧Promise

Promise是一種異步編程解決方案。Promise構(gòu)造函數(shù)接收兩個參數(shù):resolve和reject。resolve作為成功的回調(diào)函數(shù),reject作為失敗的回調(diào)函數(shù)。

  // 1.創(chuàng)建promise對象
        let p1=new Promise((resolve,reject)=>{
            // resolve,reject是回調(diào)函數(shù)
            // resolve函數(shù)是promise對象最終狀態(tài)為成功狀態(tài)
            //reject函數(shù)是promise對象最終狀態(tài)為失敗狀態(tài)
            
            //非異步
            //假設異步操作執(zhí)行成功,修改promise對象狀態(tài)為成功狀態(tài)
            if(3>2){
                resolve('success')
            }else{
                //假設異步操作執(zhí)行失敗,修改promise對象狀態(tài)為失敗狀態(tài)
                reject('error')
            }
        })
        //如何提供resolve和reject函數(shù)
       //在promise原型里有then和catch
        // 1.then方法表示的是成功之后的回調(diào),對應resolve
        // 2.catch方法表示的是失敗之后的回調(diào),對應reject
        p1.then((res)=>{
            console.log(res,'成功回調(diào)')
        }).catch((error)=>{
            console.log(error,'失敗回調(diào)')
        }).finally(()=>{
            console.log('最終執(zhí)行')
        })
		//如果then里面?zhèn)髁藘蓚€回調(diào)函數(shù),第一個代表成功之后的回調(diào),第二個代表失敗之后的回調(diào),分別代表resolve()和reject()
		p1.then((res)=>{
            console.log(res,'成功')
        },(err)=>{
            console.log(res,'失敗')
        });

4. Vue封裝Axios

Axios是一個基于promise的HTTP庫,可以用在瀏覽器和node.js中。jQuery中也封裝了ajax機制,但是僅適用于瀏覽器。

功能特點:

  • 在瀏覽器和node.js中皆可用
  • 自動轉(zhuǎn)化請求數(shù)據(jù)和響應數(shù)據(jù)格式為JSON數(shù)據(jù)格式
  • 可以做攔截請求和響應攔截
  • 可以調(diào)用Promise的API
  • axios默認發(fā)送請求為get方式,默認數(shù)據(jù)格式為JSON格式

封裝步驟:

在項目中安裝axios:npm i -S axios創(chuàng)建封裝axios的文件夾并導入axios,根據(jù)項目所需創(chuàng)建axios API:

import axios from "axios";
import Qs from 'qs';
let qs= Qs;
// 創(chuàng)建axios實例對象
let instance = axios.create({
	baseURL:"http://121.199.0.35:8888",
	timeout:5000
});
// 請求攔截器 
instance.interceptors.request.use(config=>{
	if(config.url!=='/user/login'){
		config.headers.Authorization='eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJNalU9Iiwic3ViIjoiYWRtaW4xIiwiaXNzIjoiMDk4ZjZiY2Q0NjIxZDM3M2NhZGU0ZTgzMjYyN2I0ZjYiLCJpYXQiOjE2NjQ5MzY4OTksImF1ZCI6InJlc3RhcGl1c2VyIiwiZXhwIjoxNjY1MTA5Njk5LCJuYmYiOjE2NjQ5MzY4OTl9.uLSFoGrqdvZS-3KA1HgjgshUZOqGbMWO5Rpr1yzMCAY';
	}
	return config
},error=>{
	return Promise.reject(error)
});
// 響應攔截器 ---對axios封裝響應數(shù)據(jù)做攔截
instance.interceptors.response.use(response=>{
	let res=response.data;
	return res
},error=>{
	return Promise.reject(error)
});

// 封裝get方法
export function get(url,params){
	return instance.get(url,{
		params,
	})
}
//封裝postJSON方法 json數(shù)據(jù)格式 --登錄接口
export function postJSON(url,data){
	return instance.post(url,data);
}

// 封裝post方法 表單格式數(shù)據(jù)
export function post(url,data){
	return instance.post(url,qs.stringify(data))
}

export default instance

到此這篇關(guān)于Axios在vue項目中的封裝方法的文章就介紹到這了,更多相關(guān)Axios vue封裝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue的table表格組件的封裝方式

    vue的table表格組件的封裝方式

    這篇文章主要介紹了vue的table表格組件的封裝方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-06-06
  • vue3+echarts實現(xiàn)好看的圓角環(huán)形圖

    vue3+echarts實現(xiàn)好看的圓角環(huán)形圖

    這篇文章主要介紹了vue3+echarts實現(xiàn)好看的圓角環(huán)形圖效果,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Vue3?setup中使用$refs的方法詳解

    Vue3?setup中使用$refs的方法詳解

    在?Vue?3?中的?Composition?API?中,$refs?并不直接可用于?setup?函數(shù),但是實際工作中確實有需求,那么該如何解決呢,本文為大家整理了兩個方案,希望對大家有所幫助
    2023-08-08
  • 老生常談vue3組件通信方式

    老生常談vue3組件通信方式

    這篇文章主要介紹了vue3組件通信方式,面試題經(jīng)常會問到vue3組件間的通信方式,今天就通過實例代碼給大家詳細介紹下,對vue3組件通信相關(guān)知識感興趣的朋友一起看看吧
    2022-08-08
  • vue3常用的指令之v-bind和v-on指令用法

    vue3常用的指令之v-bind和v-on指令用法

    vue的v-on與v-bind,v-on就是用于綁定事件的,下面這篇文章主要給大家介紹了關(guān)于vue3常用的指令之v-bind和v-on指令用法的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
    2023-12-12
  • vue項目實現(xiàn)webpack配置代理,解決跨域問題

    vue項目實現(xiàn)webpack配置代理,解決跨域問題

    這篇文章主要介紹了vue項目實現(xiàn)webpack配置代理,解決跨域問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue實現(xiàn)日歷表格(element-ui)

    vue實現(xiàn)日歷表格(element-ui)

    這篇文章主要為大家詳細介紹了vue實現(xiàn)日歷表格(element-ui),文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-09-09
  • vue+springboot+element+vue-resource實現(xiàn)文件上傳教程

    vue+springboot+element+vue-resource實現(xiàn)文件上傳教程

    這篇文章主要介紹了vue+springboot+element+vue-resource實現(xiàn)文件上傳教程,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • 關(guān)于Vue.js一些問題和思考學習筆記(2)

    關(guān)于Vue.js一些問題和思考學習筆記(2)

    這篇文章主要為大家分享了關(guān)于Vue.js一些問題和思考的學習筆記,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • Vue實現(xiàn)導出word文檔的示例詳解

    Vue實現(xiàn)導出word文檔的示例詳解

    這篇文章主要為大家詳細介紹了Vue如何使用第三方庫file-saver和html-docx-js實現(xiàn)導出word文檔的效果,感興趣的小伙伴可以跟隨小編一起學習一下
    2024-02-02

最新評論