vue專案中使用axios處理后端介面請求，參考摘錄自axios官方檔案
1、axios插件包安裝
npm install axios --save
2、在main.js中全域引入axios
因為axios不是為了vue寫的插件(插件內要處理)不支持vue.use()加載方式，為方便使用，可以將其掛載在vue原型上；全域使用this.$axios
import axios from 'axios' Vue.prototype.$axios = axios
3、axios基本使用方法,axios請求回傳的是一個promise物件
let api = 'http://'
this.$axios.post(api, {userId: '57393746696202243'}).then((response) => {
console.log(response)
})
4、也可以通過向 axios 傳遞相關配置來創建請求
let curBaseURL = 'http://'
let sUrl = 'api/login'
this.$axios({
method: 'post', // 請求方法-post/get(default)...
url: sUrl,
// `baseURL` 將自動加在 `url` 前面，除非 `url` 是一個絕對 URL，它可以通過設定一個 `baseURL` 便于為 axios 實體的方法傳遞相對 URL
baseURL: curBaseURL,
// `headers` 是即將被發送的自定義請求頭
headers: {
'W-SEQ': 'default'
},
// `params` 是即將與請求一起發送的 URL 引數
// 必須是一個無格式物件(plain object)或 URLSearchParams 物件
params: {
// ID: 12345
},
// 只適用于這些請求方法 'PUT', 'POST', 和 'PATCH'
// 在沒有設定 `transformRequest` 時，必須是以下型別之一：
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - 瀏覽器專屬：FormData, File, Blob
// - Node 專屬： Stream
data:{
userId: '57393746696202243'
},
// `timeout` 指定請求超時的毫秒數(0 表示無超時時間)
// 如果請求話費了超過 `timeout` 的時間，請求將被中斷
// timeout: 1000,
// `auth` 表示應該使用 HTTP 基礎驗證，并提供憑據
// 這將設定一個 `Authorization` 頭，覆寫掉現有的任意使用 `headers` 設定的自定義 `Authorization`頭
auth: {
username: 'test',
password: '1111'
},
})
5、總結
一般我們在專案中使用，都會提前封裝好axios請求的一些常用方法和屬性，api介面也會統一管理，在下一篇中再詳細記錄——關于axios請求和api介面的統一管理
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/237044.html
標籤：其他
上一篇：vue TV端焦點移動插件 vue-tv-focusable
下一篇：JS實作計算器，帶三角函式，根號