axios的用法詳解

axios: 是一個類庫，基於Promise管理的Ajax庫，支援瀏覽器和nodejs的http庫，常用於Ajax請求。

特點從瀏覽器中建立 XMLHttpRequests 從 node.js 建立 http 請求支援 Promise API 攔截請求和響應轉換請求資料和響應資料取消請求自動轉換 JSON 資料客戶端支援防禦 XSRF

安裝方法

使用 npm:

$ npm install axios
複製程式碼

使用 bower:

$ bower install axios
複製程式碼

使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
複製程式碼

axios提供了多種請求方式，比如直接發起get或post請求：

執行get請求

// 為給定 ID 的 user 建立請求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 可選地，上面的請求可以這樣做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
複製程式碼

在get請求中的鍵值對拼接成URLENCODED式的字串然後1以問號傳遞引數的方式，傳遞給伺服器。

執行post請求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
複製程式碼

基於Promise,可以執行多個併發請求：

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 請求現在都執行完成時
  }));
複製程式碼

也可以通過寫入配置的形式發起請求： axios(config)

// 傳送 POST 請求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
})
	.then(function(res) {
	console.log(res)
	});
複製程式碼

在業務中，經常將其封裝成為例項的形式呼叫，便於做通用配置，例如：

//util.js
const instance = axios.create({
	baseURL: 'http://some-domain.com/api',
	timeout: 1000,
	header: {
	'Content-Type': 'application/x-www-form-urlencoded'
	}
}) 

export default instance
複製程式碼

index.js

<tempalte>
	<div></div>
</template>
<script>
	import Ajax from './util.js'
	export default {
	created(): {
		 Ajax ( {
			method: 'post',
			url: '/user',
			  data: {
					    firstName: 'Fred',
					    lastName: 'Flintstone'
					  }
		}).then(res => {
			console.log(res)
		})
		}
	}
</script>
複製程式碼

請求方法的別名

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]])

標註：在使用別名方法時， url、method、data 這些屬性都不必在配置中指定。

併發

處理併發請求的助手函式

axios.all(iterable) axios.spread(callback)

建立例項 可以使用自定義配置新建一個 axios 例項

axios.create([config])

var instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});
複製程式碼

更多關於axios的配置請參考： www.kancloud.cn/yunye/axios…

axios的用法詳解

相關文章