1. 程式人生 > >react 外掛之axios簡單實用

react 外掛之axios簡單實用

本文只是初級介紹axios最基本用法(get,post,all請求),至於擴充套件和延伸只是沒有過多贅述,更多內容可以參看axios官網。如有不周之處還請諒解。

個人建議使用npm安裝開始專案(進入到相關命令列工具中操作即可

使用npm:

$ npm i axios

tip:

react在引進axios時所用 '' 實際為 `` 即反引號!

示例一

使用一個 GET 請求

//發起一個login請求,引數為給定的ID

axios.get('/login?ID=12345')

.then(function(res){

console.log(res);

})

.catch(

function(error){

console.log(error);

});

//上面的請求也可選擇以下面的方式來改寫

axios.get('/user',{

params:{

ID:12345

}

})

.then(function(res){

console.log(res);

})

.catch(function(error){

console.log(error)

});

下面是我自己在專案裡面常用的寫法,個人覺得不錯,貢獻出來......

例如:

let idid=this.props.ID
let timestamp = Date.parse(new Date());

axios.get(`${url}/invoice/GetListNoGroup?id=${idid}&&timestamp=${timestamp}`)
.then(res=>{console.log(res.data)})
.catch(err=>console.log(err))

示例二

發起一個 POST 請求

axios.post('/reg',{

Name:'hopefullman',

pass:'123456'

})

.then(function(res){

console.log(res);

})

.catch(function(error)

{

console.log(error);

});

下面是我自己在專案裡面常用的寫法,個人覺得不錯,貢獻出來......

例如:

 let data={
          name:admin,
          password:password,
          }
       
        axios.post(`${url}/UserInfo/Login`,data)
        .then(res=>this.loginok(res))
        .catch(err=>this.loginerr(err))

示例三

發起一個多重併發請求

function getUser(){

return axios.get('/login/12345');

}

function getAccount(){

return axios.get('/reg/12345');

}

axios.all([getUer(),getAccount()])

.then(axios.spread(function(acc,pers){

}));

來來來補充下關於驗證伺服器的一些辦法:

來一個類似原生的:

   axios.post("http://gst.bclzdd.com/connect/token","client_id=client2&client_secret=secret&username="+username+"&password="+password+"&grant_type=password")
     .then(res=>{console.log(res)})
     .catch(err=>{console.log(err)})

來一個axios的    axios.post(`${url}/connect/token`,`client_id=client2&client_secret=secret&username=${username}&password=${password}&grant_type=password`)
     .then(res=>{console.log(res)})
     .catch(err=>{console.log(err)})

相關推薦

react 外掛axios簡單實用

本文只是初級介紹axios最基本用法(get,post,all請求),至於擴充套件和延伸只是沒有過多贅述,更多內容可以參看axios官網。如有不周之處還請諒解。 個人建議使用npm安裝開始專案(進入到相關命令列工具中操作即可) 使用npm: $ npm i axios

React學習旅----mock模擬假資料及封裝axios,動態渲染表格

import React from 'react'; import { Card, Table, Modal, Button, message } from 'antd'; import axios from './../../axios/index' import Utils from './..

jsPlumb外掛 在Vue中的簡單實用

    1、什麼是jsplumb? jsplumb是一個外掛,如果你想在Web網頁繪製圖表或者工作流程設計器,並且可以實現任意拖拽,連線,那麼你可以考慮使用這個外掛。 1.2、基本概念 Souce 源節點 Target 目標節點 Anch

mybatis免sql外掛JpaMapper-以Jpa hibernate的風格寫mybatis(mybatis實現簡單分表-sharding功能)

mybatis免sql外掛之JpaMapper-以Jpa hibernate的風格寫mybatis(mybatis實現簡單分表-sharding功能) 簡介 JpaMapper以Jpa hibernate的風格寫mybatis的程式碼,可以減少手動寫sql的煩惱。 優勢:

React Native Visual Studio Code 推薦安裝外掛

 Visual studio code 是Microsoft在2015年4月30推出 輕量級開發程式碼編輯器。相比Visual studio小了很多,Visual studio安裝Xamarin移動開發100G的C盤快要爆滿了,無力吐槽,普通電腦帶不動Visual studio;還好

PopupWindow簡單實用小例子彈出內容顯示框(一)

我們要做的功能是點選按鈕彈出一個內容框之後點選彈出的對話方塊的內容將內容顯示在輸入框中先來看下效果圖 利用PopupWindow實現彈出的內容框,PopupWindow構造可以理解為ListView+TextView,ListView是整個顯示內容的框架,而我們要顯示的內容是用TextVi

React學習旅----axios與fetch-jsonp

父元件 import React from 'react' import Header from './Header' import Footer from './Footer' import Axios from './Axios' import FetchJsonp f

AndroidStudio 外掛 Findbugs 安裝與簡單使用教程

前言         對於程式碼質量的檢查,一直是一個比較棘手的問題。雖然我們部門有關於java程式碼的各種規範,領導也多次強調對程式碼的評審。但是在實際執行過程中,由於開發人員的水平參差不齊,在開發專案時還有各種其他因素,比如時間緊任務重,自己的程式碼不規範

mybatis分頁外掛pageHelper簡單實用

工作的框架spring springmvc mybatis3 首先使用分頁外掛必須先引入maven依賴,在pom.xml中新增如下 <!-- 分頁助手 --> <dependency> <groupId>com.githu

Android Studio碎片簡單實用的配置

1.字型大小Settings-Editor-Colors & Fonts-Font下2.自動導包Settings-Editor-General-Auto Import選項下3.顯示行數Settings-Editor-General-Appearance-show l

FlycoDialog 簡單實用的自定義Android彈窗對話方塊Dialog篇

效果圖鎮樓 FlycoDialog是一款非常棒的彈窗對話方塊處理框架,今天在這裡主要講一下他的自定義彈出對話方塊的功能,這裡以第二幅效果圖為例,圖片已經放在部落格最下方,X號自己隨便找一個東西代替吧。 首先我們還是先新增依賴

混合開發的大趨勢之一React Native簡單的登入介面

這些天都在學習RN這部分吧,然後寫了個簡單的登陸業務,從“實戰”中講解吧 先上下效果圖 效果很簡單就是2個<Text/> 2個<TextInput/>1個<Button/> 按鈕控制元件是第三方的,就是為了演示下如何在

react-redux簡單實用

       首先了解一個過程,redux  肯定是通過在元件中出發一個方法(事件),我們可以實現一個簡單的例子播放和停止播放(寫到這今日心情不好,下次繼續) redux需要安裝 以下依賴:cnpm install redux --savecnpm inst

C# 服務端篇實現RestFul Service開發(簡單實用)

原文地址:http://www.cnblogs.com/xuliangxing/p/8735552.html 一、RestFul簡介   REST(Representational State Transfer 通常被翻譯為“表述性狀態傳輸”或者“表述性狀態轉移”)是RoyFielding提

HTML5 Canvas簡單實用的圖表外掛

Chart.js是一款簡單實用的基於HTML5 canvas的js圖表外掛。該js圖表外掛利用canvas的特性,動態生成各種型別的圖表。圖表型別有:柱狀圖、線性圖、餅狀圖、環狀圖、極座標圖和雷達圖。並可以自定義tooltips。

swipe輪播外掛,支援手勢,簡單實用

<section class="recommend-swiper swiper-container">         <div class="swiper-wrapper">             <div class="swiper-slide"><a href

Atom中七個實用React外掛

提前下載好Atom並安裝,開啟setting > install, 出現介面如下: 直接在Search packages中搜索需要的外掛即可外掛一: atom-ternjs  JS ES6新語法支援,程式碼智慧提示補全外掛二:atom-beautify  程式碼美化格式

簡單實用的wordpress文章插入程式碼語法高亮外掛

如何在文章中插入程式碼這本來是件簡單的事,但由於wordpress是用PHP程式碼寫的,所以在wordpress的文章中插入PHP程式碼就會有些部份會被遮蔽掉,針對這種問題本站特意來推薦一個簡潔乾淨的程式碼顯示外掛CodeColorer,這是一個很經典的程式碼高亮外掛,使

基於jQuery簡單實用的Tabs選項卡外掛

jQuery龐大的外掛庫總是讓人歡喜讓人憂,如何從龐大的外掛庫裡挑出適合自己的外掛,總是讓很多缺少經驗的朋友頭疼的事!今天為大家推薦幾款簡單實用的Tabs選項卡外掛,推薦理由:簡單易用靈活,樣式美觀,開源免費! 1.jQuery UI Tabs jquery ui

vue實例講解axios的使用

bsp 目錄 引入 .proto 拓展 技術 調用 地址 import 本篇來講解一下axios插件的使用,axios是用來做數據交互的插件。 這篇將基於vue實例講解之vue-router的使用這個項目的源碼進行拓展。 axios的使用步驟: 1.安裝axios n