1. 程式人生 > >axios基本用法

axios基本用法

vue更新到2.0之後,作者就宣告不再對vue-resource更新,而是推薦的axios,前一段時間用了一下,現在說一下它的基本用法。

首先就是引入axios,如果你使用es6,只需要安裝axios模組之後

import axios from 'axios';
//安裝方法
npm install axios
//或
bower install axios

當然也可以用script引入

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

axios提供了一下幾種請求方式

axios.request(config)

axios.get(url[, config])

axios.
delete(url[, config]) axios.head(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]])

這裡的config是對一些基本資訊的配置,比如請求頭,baseURL,當然這裡提供了一些比較方便配置項

//config
import Qs from 'qs'
{ //請求的介面,在請求的時候,如axios.get(url,config);這裡的url會覆蓋掉config中的url
url: '/user', // 請求方法同上 method: 'get', // default // 基礎url字首 baseURL: 'https://some-domain.com/api/',
  
     transformRequest: [function (data) { // 這裡可以在傳送請求之前對請求資料做處理,比如form-data格式化等,這裡可以使用開頭引入的Qs(這個模組在安裝axios的時候就已經安裝了,不需要另外安裝)   data = Qs.stringify({}); return data; }], transformResponse: [function
(data) { // 這裡提前處理返回的資料 return data; }], // 請求頭資訊 headers: {'X-Requested-With': 'XMLHttpRequest'}, //parameter引數 params: { ID: 12345 }, //post引數,使用axios.post(url,{},config);如果沒有額外的也必須要用一個空物件,否則會報錯 data: { firstName: 'Fred' }, //設定超時時間 timeout: 1000, //返回資料型別 responseType: 'json', // default }

有了配置檔案,我們就可以減少很多額外的處理程式碼也更優美,直接使用

axios.post(url,{},config)
    .then(function(res){
        console.log(res);
    })
    .catch(function(err){
        console.log(err);
    })
//axios請求返回的也是一個promise,跟蹤錯誤只需要在最後加一個catch就可以了。
//下面是關於同時發起多個請求時的處理
axios.all([get1(), get2()])
  .then(axios.spread(function (res1, res2) {
    // 只有兩個請求都完成才會成功,否則會被catch捕獲
  }));

最後還是說一下配置項,上面講的是額外配置,如果你不想另外寫也可以直接配置全域性

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

//當然還可以這麼配置
var instance = axios.create({
  baseURL: 'https://api.example.com'
});

我寫的兩個例子:

相關推薦

Vue Axios基本用法

Axios Axios是一個基於promise的HTTP庫,可以用在瀏覽器和node.js中. 通過npm 使用axios npm install axios 也可以在專案中使用cdn引入axios get請求 // 不指定post和get方式,會預設為get

axios基本用法

vue更新到2.0之後,作者就宣告不再對vue-resource更新,而是推薦的axios,前一段時間用了一下,現在說一下它的基本用法。 首先就是引入axios,如果你使用es6,只需要安裝axios模組之後 import axios from 'axios';//安裝方法npm install ax

axios基本用法~~

axios Promise based HTTP client for the browser and node.js 以Promise為基礎的HTTP客戶端,適用於:瀏覽器和node.js 封裝ajax,用來發送請求,非同步獲取資料 // 在瀏覽器中使用,直

shape的基本用法

enc schema 顏色 顏色漸變 mas utf pad 半徑 start <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/

Pinyin4j的基本用法

nts 人的 此外 中文 put stat -s http any     轉自:http://www.cnblogs.com/bluestorm/archive/2012/07/23/2605412.html 1. 簡單介紹 有時候,需要將漢字編程對應的拼音,以

11.python並發入門(part9 多線程模塊multiprocessing基本用法

python 多進程 multiprocessing 一、回顧多繼承的概念。由於GIL(全局解釋器鎖)的存在,在python中無法實現真正的多線程(一個進程裏的多個線程無法在cpu上並行執行),如果想充分的利用cpu的資源,在python中需要使用進程。二、multiprocessing模塊的簡介

Android屬性動畫完全解析(上),初識屬性動畫的基本用法

fcm 操作 fad 擴展性 改變 內部使用 如果 轉載 @override 轉載請註明出處:http://blog.csdn.net/guolin_blog/article/details/43536355 在手機上去實現一些動畫效果算是件比較炫酷的事情,因此Andr

JQuery的基本用法

技術 -1 nbsp jquer 技術分享 9.png log query com JQuery的基本用法

Jquery-zTree的基本用法

etc ssim 希望 取數據 attribute name checked down 個性 【簡介】 zTree 是利用 JQuery 的核心代碼,實現一套能完成大部分常用功能的 Tree 插件 兼容 IE、FireFox、Chrome 等瀏覽器 在一個頁面內可同時

IntBuffer類的基本用法

容量 city out ava test buffer eat ati nis package com.ietree.basicskill.socket.basic.nio; import java.nio.IntBuffer; /** * Created by A

java基礎:運算符的基本用法

自增 另一個 stat 不同 兩個 流程 ava -- 個數 運算符: 就是對常量和變量進行操作的符號。 算數運算符: A:+,-,*,/,%,++,-- B:+的用法 a:加法 b:正號 c:字符串連接符 C:/和%的區別 數據做除法操作的時候,/取得是商

windows下boost庫的基本用法

tdi bootstrap c++ org .exe 程序編譯 ring 包括 tar 由於boost都是使用模板的技術,所以全部代碼都是寫在一個.hpp頭文件裏。這樣boost中的大部分內容是不須要編譯生成對應的鏈接庫,僅僅須要設置以下的包括文件夾(或者設置一下環境變

XUtils3框架的基本用法(一)

art put ref undle ret oncreate title 斷點續傳 lis 本文為作者原創,轉載請指明出處: http://blog.csdn.net/a1002450926/article/details/50341173 今天給大

Android_Event Bus 的基本用法

nds lis 接收數據 void ntp this als default blog 1 //事件總線分發 2 public class MainActivity extends ActionBarActivity { 3 Button b

一站式學習Wireshark(一):Wireshark基本用法

11g 實現 alt href ascii 根據 無線網絡 完成 analyze 按照國際慣例,從最基本的說起。 抓取報文: 下載和安裝好Wireshark之後,啟動Wireshark並且在接口列表中選擇接口名,然後開始在此接口上抓包。例如,如果想要在無線網絡上抓取流量

frame與iframe的區別及基本用法

url resize nor ref logs 嵌套 html span 高度 frame 和 iframe 的區別   1、frame 不能脫離 frameset 單獨使用,iframe 可以;   2、frame 不能放到body中,否則將無法顯示;   3、if

Notification的基本用法以及使用RemoteView實現自定義布局

解決 edi ngs 取消 ets lsp 過程 net tde Notification的作用 Notification是一種全局效果的通知,在系統的通知欄中顯示。既然作為通知,其基本作用有: 顯示接收到短消息、即時信息等 顯示客戶端的推送(廣告、優惠、新聞等)

黃聰:ffmpeg基本用法(轉)

sca wid cal ner aspect mp4 動態文本 tegra 控制輸出 FFmpeg FFmpeg 基本用法 本課要解決的問題 1.FFmpeg的轉碼流程是什麽? 2.常見的視頻格式包含哪些內容嗎? 3.如何把這些內容從視頻文件中抽取出來? 4.如

Oracle數據庫的基本用法

blog 重復 單列 rac bsp 算術 .cn 模糊 images 用法實例: --選取整個表的列 1. select * from emp; --選取指定列的內容 select job from emp; select ename,sal from emp;

git 基本用法

out dex 分支 sta ont align git init git clone 文件夾 返回上一個文件 git reset --hard HEAD~1 創建文件 mkdir 文件名 調用文件 cd 文件名 文件夾裏添加文本 touch index.html 文本添