Axios使用方式

ajax是JQUERY封裝的XMLHttprequest用來發送http請求

Axios簡單點說它就是一個js庫,支持ajax請求,發送axios請求功能更加豐富,豐富在哪不知道

1.npm使用方式

? ? ? ?vue項目中 npm install axios

2.cdn方式

????????<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

????????<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

3.使用本地文件

????????<script src="js/axios.min.js"></script>

axios 帶有攔截器功能:分別是請求攔截器? ?應答攔截器(就是響應攔截器)

第三種方式需要將axios文件下載到本地,下載方式

GITHUB上下載? ?地址?GitHub - axios/axios: Promise based HTTP client for the browser and node.js

在 GitHub 倉庫頁面，點擊 "Code" 按鈕，然后選擇 "Download ZIP" 以下載包含所有文件的壓縮文件。

解壓下載的 ZIP 文件。

在解壓后的文件夾中，你可以在 dist 文件夾中找到 axios.min.js 文件。

解壓后點進去dist 文件夾中找到 axios.min.js 文件。

下面用VsCode練習下axios

1.GET無參

<!DOCTYPE html>

<html lang="en">

<head>

? ? <meta charset="UTF-8">

? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">

? ? <title>Document</title>

? ? 

? ? <script src="js/axios.min.js"></script>

? ? 

? ? 

</head>

<body>

? ? <button οnclick="fn1()">使用axios發送get請求,無參數</button>

? ? <script>

? ? ? ?

//get無參請求 ?axios格式: axios.get(url).then().catch().finally()

? ? ? ? function fn1(){

? ? ? ? ? ? var url="http://localhost:8000/api/v1/product/index";

? ? ? ? ? ? axios.get(url).then(res=>{

? ? ? ? ? ? ? ? console.log(res)

? ? ? ? ? ? }).catch(err=>{

? ? ? ? ? ? ? ? console.log(err) ? ?

? ? ? ? ? ? }).finally(()=>{

? ? ? ? ? ? ? ? console.log("一定執行的代碼")

? ? ? ? ? ? })

? ? ? ? }

? ? </script>

</body>

</html>

這是因為跨域問題

2.GET請求帶參數

<!DOCTYPE html>

<html lang="en">

<head>

? ? <meta charset="UTF-8">

? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">

? ? <title>Document</title>

? ? 

? ? <script src="js/axios.min.js"></script>

? ? 

? ? 

</head>

<body>

? ? <button οnclick="fn1()">使用axios發送get請求,無參數</button>

? ? <button οnclick="fn2()">使用axios發送get請求,帶參數</button>

? ? <script>

? ? ? ? //get無參請求 ?axios格式: axios.get(url).then().catch().finally()

? ? ? ? function fn1(){

? ? ? ? ? ? var url="http://localhost:8000/api/v1/product/list";

? ? ? ? ? ? axios.get(url).then(res=>{

? ? ? ? ? ? ? ? console.log(res)

? ? ? ? ? ? }).catch(err=>{

? ? ? ? ? ? ? ? console.log(err) ? ?

? ? ? ? ? ? }).finally(()=>{

? ? ? ? ? ? ? ? console.log("一定執行的代碼")

? ? ? ? ? ? })

? ? ? ? }

? ? ? ? function fn2(){

? ? ? ? ? ? var pType=1;

? ? ? ? ? ? var pageNum=1;

? ? ? ? ? ? var pageSize=3;

? ? ? ? ? ? var url="http://localhost:8000/api/v1/product/list?pType="+pType+"&pageNum="+pageNum+"&pageSize="+pageSize;

? ? ? ? ? ? axios.get(url).then(res=>{

? ? ? ? ? ? ? ? console.log(res)

? ? ? ? ? ? }).catch(err=>{

? ? ? ? ? ? ? ? console.log(err) ? ?

? ? ? ? ? ? }).finally(()=>{

? ? ? ? ? ? ? ? console.log("一定執行的代碼")

? ? ? ? ? ? })

? ? ? ? }

? ? </script>

</body>

</html>

上面這樣是傳統傳參方式

axios使用配置項目params

<!DOCTYPE html>

<html lang="en">

<head>

? ? <meta charset="UTF-8">

? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">

? ? <title>Document</title>

? ? 

? ? <script src="js/axios.min.js"></script>

? ? 

? ? 

</head>

<body>

? ? <button οnclick="fn1()">使用axios發送get請求,無參數</button>

? ? <button οnclick="fn2()">使用axios發送get請求,帶參數</button>

? ? <button οnclick="fn3()">使用axios發送get請求,帶參數,使用axios配置項方式</button>

? ? <script>

? ? ? ? //get無參請求 ?axios格式: axios.get(url).then().catch().finally()

? ? ? ? function fn1(){

? ? ? ? ? ? var url="http://localhost:8000/api/v1/product/list";

? ? ? ? ? ? axios.get(url).then(res=>{

? ? ? ? ? ? ? ? console.log(res)

? ? ? ? ? ? }).catch(err=>{

? ? ? ? ? ? ? ? console.log(err) ? ?

? ? ? ? ? ? }).finally(()=>{

? ? ? ? ? ? ? ? console.log("一定執行的代碼")

? ? ? ? ? ? })

? ? ? ? }

? ? ? ? function fn2(){

? ? ? ? ? ? var pType=1;

? ? ? ? ? ? var pageNum=1;

? ? ? ? ? ? var pageSize=3;

? ? ? ? ? ? var url="http://localhost:8000/api/v1/product/list?pType="+pType+"&pageNum="+pageNum+"&pageSize="+pageSize;

? ? ? ? ? ? axios.get(url).then(res=>{

? ? ? ? ? ? ? ? console.log(res)

? ? ? ? ? ? }).catch(err=>{

? ? ? ? ? ? ? ? console.log(err) ? ?

? ? ? ? ? ? }).finally(()=>{

? ? ? ? ? ? ? ? console.log("一定執行的代碼")

? ? ? ? ? ? })

? ? ? ? }

? ? ? ? function fn3(){

? ? ? ? ? ? var pType=1;

? ? ? ? ? ? var pageNum=1;

? ? ? ? ? ? var pageSize=3;

? ? ? ? ? ? var url="http://localhost:8000/api/v1/product/list";

? ? ? ? ? ? axios.get(url,{

? ? ? ? ? ? ? ? params:{

? ? ? ? ? ? ? ? ? ? pType:pType,

? ? ? ? ? ? ? ? ? ? pageNum:pageNum,

? ? ? ? ? ? ? ? ? ? pageSize:pageSize

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }).then(res=>{

? ? ? ? ? ? ? ? console.log(res)

? ? ? ? ? ? }).catch(err=>{

? ? ? ? ? ? ? ? console.log(err) ? ?

? ? ? ? ? ? }).finally(()=>{

? ? ? ? ? ? ? ? console.log("一定執行的代碼")

? ? ? ? ? ? })

? ? ? ? }

? ? </script>

</body>

</html>

params是一個{}對象? ?

那么也可以

var data={

? ? ? ? xxx:xxx

? ? ? ? yyy:yyy

}

然后里面

params:data 即可

例如

Axios發送POST請求

后端接收可以是單個接收? 也可以是實體類

用AXIOS發送Post請求? ? application/json

后端接收

這個請求會發送預請求? ? 實際上是兩個請求

? ? ?預請求

AXIOS也可以像ajax那樣配置項的方式發送請求

下面兩種方式使用POST? ? PUT? ?PATCH

這種方式默認Content-Type是application/json

AXIOS的返回值

AXIOS的攔截器

攔截器分兩種,分別是

請求攔截器:在發起請求之前執行,可以對請求內容做修改,比如增加參數,設置請求頭等等

應答攔截器(相應攔截器):服務器返回結果,AXIOS的then之前先執行,可以對應答內容做處理

請求攔截器寫法

axios.interceptors.request.use(function(xxx){? ? ?記得return xxx},function(yyy) {如果錯誤做錯誤處理});

響應攔截器

AXIOS進行全局默認配置

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/160545.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/160545.shtml
英文地址，請注明出處：http://en.pswp.cn/news/160545.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！